JSFiddle - React, Tailwind, and code Playground

by Heather

HTML

<div ng-app="myApp">
<div ng-controller="interestRatesController as vm">
  <div>ui-percentage-value test</div>
  <form name="vm.formContainer.form">
    <div>        
      <label>Interest Rate 1</label>
      <input type="text" ng-model="vm.interestRate1">
    </div>
    <div>    
      <label>Interest Rate 2</label>
      <input type="text" ui-percentage-value ng-model="vm.interestRate2">
    </div>
    <div>    
      <label>Interest Rate 3</label>
      <input type="text" ui-percentage-value ui-percentage-mask min="0.00" max="100.0" ng-model="vm.interestRate3">
    </div>
    <div>
      <button ng-click="vm.save()">
        Submit
      </button>
    </div>
  </form>
    <hr>
    <div>
      {{vm}}
    </div>
  </div>
</div>

CSS

input {
  width: 100px;
  text-align: right;
}

JavaScript

angular.module("myApp", [])
	.controller("interestRatesController", ['$scope', function ($scope) {
  	//var vm = this;
    
    vm.formContainer = {
    	form: {}
    }
  
  	vm.save = function () {
    	vm.msg = 'some message';
    }
    
  }]);