Question

我需要输出值并使用AngularUI滑块的值执行一些计算。

我有这个标记：

<body ng-controller="sliderDemoCtrl">
            <div ui-slider="{range: 'min'}" min="0" max="50" ng-model="demoVals.slider"></div>
            <p>The value so far is:
              <span ng-bind="demoVals.slider"></span> // I want this to show 0 until the slider is moved
            </p>
            <p>The calculated value is: <input type="text" ng-model="calculated" value=" {{ calculated }}" placeholder=0 /></p>

</body>

首先，我无法弄清楚如何使用默认值0或“无”初始化<span ng-bind="demoVals.slider"></span>。此时它一直是空白的，直到滑块移动。如何将其设置为默认值？

其次，我希望{{ calculated }}的值是一个乘以滑块值的数字。如何将滑块的值传递给ng-model="calculated"或从我的控制器中访问该值？

Here's my Plunkr

Answer 1

您可以在ng-model：

中设置$scope的初始值

      $scope.demoVals = {};
      $scope.demoVals.slider = 0;

要使用calculated以sync的方式保持demoVals.slider的价值，您可以在$watch上使用$scope：

      $scope.$watch('demoVals.slider', function (newVal) {
        if (typeof newVal !== 'undefined') {
          $scope.calculated = newVal * 3.14159; // Use any value here.
        }
      });

Working demo

Answer 2

ng-model的工作方式，它绑定到您在标记中的属性值中定义的范围属性。如果不存在这样的scope属性，则会在初始化时创建它。

因此，要设置起始值，只需创建该模型属性即可。要根据滑块模型的更改调整其他范围属性，可以使用$watch侦听滑块模型属性的更改

    app.controller('sliderDemoCtrl', function($scope) {
        /* ng-model bound to this object, so define it's start value*/
        $scope.demoVals={slider:10}
        /* watch for changes*/
        $scope.$watch('demoVals.slider',function(newVal,oldVal){
         if(newVal){
            $scope.calculated=2*newVal;
         }
      })

        $scope.calculated = 0;

    });

的 DEMO

获取AngularUI滑块的值，并设置ng-bind的默认/初始值

2 个答案: