如何更新基於另外兩個滑塊的滑塊

我有兩個輸入滑塊，我希望第三個滑塊是前兩個滑塊的乘積，第三個滑塊必須在更改前兩個滑塊的值時動態更改其值。如何更新基於另外兩個滑塊的滑塊

你能幫我解決嗎。

這裏是我試過

<!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; 
});

Plunker link的一樣。

來源

2016-04-22 MaheshKumar

使用ng-change對要評估其值的元素進行函數調用。 Reference

這裏是代碼片段

的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; 
    }

來源

2016-04-22 20:04:17 kelvien

我能理解你正在試圖通過NG-值要達到什麼，但NG-值不計算模型的值，因此它不會更新滑塊 – kelvien

如何更新基於另外兩個滑塊的滑塊

回答

相關問題