如何设置滑块最大值以及如何为滑块进行双向绑定？答案

【问题标题】：How to set the slider max value and how to make two way binding for the slider?如何设置滑块最大值以及如何为滑块进行双向绑定？
【发布时间】：2016-09-01 09:18:39
【问题描述】：

按照here 提供的示例，我已经按照要求安装了滑块

index.html

<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Rating</title> 
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">     
        <script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>   
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>           

        <script src="test.js"></script>   
    </head>

    <body ng-app="myApp">       
        <div ng-controller="testController">                    
                <table>                 
                    <tr>
                        <td>Amount:</td>                                        
                        <td><div slider ng-model="amount" style="width:200px;"></div></td>
                        <td><input type= "text" ng-model="amount" id="txtAmount"></td>
                    </tr>                                                       
                </table>                                            
             </div>      
    </body>
</html>

test.js

var myApp = angular.module("myApp", []);
myApp.controller("testController", function($scope, $http){

    $scope.amount = 1;

}); //end controller

myApp.directive('slider', function() {
      return {
        restrict: 'A',
          scope: {
              ngModel: '='
          },
        link: function(scope, elem, attrs) {

          console.log(scope.ngModel);

          return $(elem).slider({
            range: "min",
            animate: true,
            value: scope.ngModel,
            slide: function(event, ui) {
              return scope.$apply(function(){
                scope.ngModel = ui.value;
              });
            }
          });
        }
      };
    });

问题是

a) 最大范围不能设置超过 100。假设我希望最小值为 1，最大值为 1000。如何做到这一点？

b) 没有发生双向绑定。假设我将“txtAmount”的值设置为 50，那么滑块应该指向该值（50）

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

可以使用max option 更改最大范围，您可以在下面的示例中看到它。如果 max 字段不会在元素中指定，它将设置最大值为 100。
两个绑定适用于 Angular 的元素，因为它正在监视变化，因此您基本上需要对 jQuery 元素执行相同的操作

代码：

scope.$watch('ngModel', function(val) {
  $(elem).slider("value", val);
});

完整的小提琴 - http://jsfiddle.net/zv78jsz6/

【讨论】：