Question

$ scope。$ watch函数不反映对$ scope.Fruits所做的更改。当应用了受尊重的过滤器时，$ scope.Fruits会在HTML中更新。我认为这是因为$ scope.colorFilter函数中的'return'。我无法找到任何方法。

Javascript如下：

 angular.module('fruit', []);

function FruitCtrl($scope) {
$scope.fruit = [
    {'name': 'Apple', 'colour': 'Red'},
    {'name': 'Orange', 'colour': 'Orange'},
    {'name': 'Banana', 'colour': 'Yellow'}
];

$scope.colourIncludes = [];

$scope.includeColour = function(colour) {
    var i = $.inArray(colour, $scope.colourIncludes);
    if (i > -1) {
        $scope.colourIncludes.splice(i, 1);
    } else {
        $scope.colourIncludes.push(colour);
    }
}

$scope.colourFilter = function(fruit) {

    if ($scope.colourIncludes.length > 0) {
        if ($.inArray(fruit.colour, $scope.colourIncludes) < 0){
          alert('hi');
            return;
        }

    }

    return fruit;
}

$scope.$watch('Fruits', function (newValue, oldValue) {
                    console.log($scope.Fruits);
                    console.log(newValue);
                    console.log(oldValue);
    }, true)

 }

HTML文件：

 <div ng-app="fruit">
<div ng-controller="FruitCtrl">

    <input type="checkbox" ng-click="includeColour('Red')"/> Red</br/>
    <input type="checkbox" ng-click="includeColour('Orange')"/> Orange</br/>
    <input type="checkbox" ng-click="includeColour('Yellow')"/> Yellow</br/>

    <ul>
        <li ng-repeat="f in fruit | filter:colourFilter">
            {{f.name}}
        </li>
    </ul>

    Filter dump: {{colourIncludes}}
</div>

Answer 1

$watch方法接受您要执行的操作的两个参数：

您要关注的变量的名称（在此示例中为fruits）
当范围

在您的情况下，您需要将Fruits更改为fruit，因为这是您的变量名称，如果您更愿意使用Fruits来引用这些水果，您可以随时根据需要调整范围和视图。

Answer 2

使用$watchCollection

Shallow监视对象的属性，并在任何属性发生更改时触发（对于数组，这意味着要观察数组项;对于对象映射，这意味着要观察属性）。如果检测到更改，则会触发侦听器回调。

Answer 3

问题是您的$watch函数引用了错误的变量。第一个参数应该是您要监视更改的范围内变量的名称。在这种情况下，它被称为fruit，而不是Fruits。据我所知，没有名为Fruits的范围变量，因此监视函数永远不会触发。

请查看documentation here了解详情。

此外，由于您提出了colorFilter功能，我认为我会对此发表评论。

根据我的经验，以您完成的方式使用的过滤器函数（通过filter:属性在HTML中引用的范围函数）应返回true或{{1}根据你的逻辑。

所以基本上是这样的：

false

$ scope。$ watch函数不反映变化？

3 个答案: