Question

我有两个输入滑块，我希望第三个滑块是前两个滑块的产物，第三个滑块也必须在更改前两个滑块的值时动态更改其值。

你能帮帮我吗。

这是我试过的

<!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="angular.js@1.4.x" 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也是如此。

Answer 1

使用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;
  }

如何根据其他两个滑块更新滑块

1 个答案: