2016-04-22 15 views
0

2つの入力スライダがあり、3つ目のスライダを最初の2つのスライダの元にしたい場合、3番目のスライダは最初の2つのスライダの値を変更するときに、他の2つのスライダに基づいてスライダを更新する方法

お手伝いできますか?ここで

私は同じのためにPlunker link

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <input ng-model="value1" type="range" min="0" max="1" step="0.1" /> 
    <input ng-model="value2" type="range" min="0" max="1" step="0.1" /> 
    <input ng-model="value3" ng-value="value1 * value2" type="range" min="0" max="1" step="0.1" /> 

    </body> 

</html> 

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.value1=0.2; 
    $scope.value2=0.1; 
    $scope.value3=0; 
}); 

を試みたものです。

答えて

0

ng-changeを使用して、値が評価される要素の関数呼び出しを行います。ここでReference

は、コードスニペットは、私はあなたがNG-値を通じて達成しようとしたが、ng-されているかを理解することができます

index.htmlを

<body ng-controller="MainCtrl"> 
    <input ng-model="value1" ng-change="changed()" type="range" min="0" max="1" step="0.1" /> 
    <input ng-model="value2" ng-change="changed()" type="range" min="0" max="1" step="0.1" /> 
    <input ng-model="value3" type="range" min="0" max="1" step="0.01" /> 
</body> 

app.js

$scope.changed = function(){ 
    $scope.value3=$scope.value1*$scope.value2; 
    } 
+0

です値はモデルの値を評価しないため、スライダを更新しません – kelvien

関連する問題