0

我需要输出值并使用 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>

首先，我不知道如何<span ng-bind="demoVals.slider"></span>使用默认值 0 或“无”来初始化它。目前它是空白的，直到滑块移动。如何将其设置为默认值？

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

这是我的 Plunkr

4

2 回答 2

1

ng-model您可以在中设置 的初始值$scope：

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

calculated并且要以一种方式保持 的值sync与demoVals.slider，您可以在$watch上使用 a $scope：

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

工作演示。

于 2013-11-02T14:16:45.057 回答
0

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

因此，要设置起始值，只需创建该模型属性。要根据滑块模型的更改调整另一个范围属性，您可以使用$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

于 2013-11-02T14:14:54.353 回答