как обновить слайдер на основе двух других слайдеров

Question

как обновить слайдер на основе двух других слайдеров

0

У меня есть два входных слайдера, и я хочу, чтобы третий слайдер был продуктом первых двух слайдеров, а третий слайдер должен динамически изменять его значение при изменении значений первых двух слайдеров.

Не могли бы вы помочь мне с этим.

Вот что я пробовал

<!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 на то же самое.

MaheshKumar 22 апр. 2016, в 22:46

Источник

Теги:

javascript

html

angularjs

slider

1 ответ

Ещё вопросы

kelvien · Answer 1 · 2016-04-22T18-45-00.000Z

Используйте ng-change, чтобы вызвать вызов функции для элементов, которые будут оценивать его значение. Справка

Вот фрагмент кода

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

Я могу понять, чего вы пытаетесь достичь с помощью ng-value, но ng-value не оценивает значения модели, поэтому не будет обновлять ползунок