如何将范围输入中的值用于使用 AngularJS 的 if 语句？答案

【问题标题】：How to use values from range input into if statement with AngularJS?如何将范围输入中的值用于使用 AngularJS 的 if 语句？
【发布时间】：2015-08-12 14:51:36
【问题描述】：

我有一个可以改变音量的滑块。我还有一个按钮，每次单击时都会将count 变量提高1。

我写了一个if-statement，如果这两个变量匹配但它不起作用，它应该会发出警报。

if ($scope.count == $scope.data.volume) {
   alert('finished')
}

Codepen example

这里出了什么问题？

【问题讨论】：

标签： javascript css angularjs input range

【解决方案1】：

你的 If 语句超出了 plusOne 函数

$scope.plusOne = function() {
    $scope.count++
}
if ($scope.count == $scope.data.volume) {
    alert('finished')
}

在你包含它之前它不会起作用

$scope.plusOne = function() {
   $scope.count++
   if ($scope.count == $scope.data.volume) {
      alert('finished')
   }
}

【讨论】：

这并没有考虑到范围滑块可以改变 data.volume 的值

【解决方案2】：

查看您在 codepen 上发布的代码（此处发布，因为您在问题中发布的代码没有提供足够的上下文）；

angular.module('ionicApp', ['ionic'])
  .controller('MyCtrl', function($scope, $timeout) {
    $scope.myTitle = 'Template';
    $scope.data = { 'volume' : '5' };
    $scope.count = 0;
    $scope.plusOne = function() {
      $scope.count++
    }
    if ($scope.count == $scope.data.volume) {
      alert('finished')
    } 
  });

当控制器被实例化时，你只检查一次$scope.count == $scope.data.volume。您的代码没有考虑到您需要在值实际更改时进行检查的事实。您需要使用$scope.$watchCollection。

如果使用 Angular > 1.2（看起来你来自你的 codepen）...

$scope.$watchCollection('[count,data.volume]',function() {
  if ($scope.count == $scope.data.volume) {
    alert('finished')
  }
});

注意，$scope.$watchCollection 的第一个参数不是数组——它是一个看起来像数组的字符串。

【讨论】：