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$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 に答える