Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html  ng-app="MyModule">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
  
  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="ctrl"> 
      <label>FirstVal: </label>
      <input ng-model="FirstVal" spinner>
      <br>
      <label>SecondVal:</label>
      <input ng-model="SecondVal" spinner>
      <br>   
  Result: {{result}}
  
</body>
</html>
 
var MyModule = angular.module('MyModule', []);
function ctrl($scope, numberFilter) {
    $scope.FirstVal = 3000;
    $scope.SecondVal = 2000;
    $scope.result = $scope.FirstVal + $scope.SecondVal;
}
MyModule.directive('spinner', function (numberFilter) {
  return {
    restrict: 'A',
    require : 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
        
      $(function(){
        element.spinner({
          min: 0,
          max: 10000,
          step: 1000,
          spin: function( event, ui ) {
            ngModelCtrl.$setViewValue(ui.value);
            scope.result = scope.FirstVal + scope.SecondVal;
            scope.$apply();          
          }
        });
      });
    }
  };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers