应用错误收集

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

时间：2016-09-01 09:18:39

标签： javascript angularjs

按照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）双向绑定没有发生。假如我设置＆＃34; txtAmount＆＃34;的值。到50，然后滑块应指向该值（50）

1 个答案:

答案 0 :(得分：3)

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

代码：

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

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