$ scope。$ watch函數不能反映變化嗎？

Question

$ scope。$ watch函數不能反映對$ scope.Fruits所做的更改。 應用受尊重的過濾器后，$ scope.Fruits將在HTML中更新。 我認為這是因為$ scope.colorFilter函數中的“返回”。 我找不到任何解決方法。

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作用域變量，因此watch函數將永遠不會觸發。

請查看此處的文檔以獲取更多信息。

另外，由於您啟動了colorFilter函數，因此我想就此發表評論。

以我的經驗，按照您的方式使用的過濾器函數（在HTML中通過filter:屬性引用的范圍函數）應根據您的邏輯返回true或false 。

因此，基本上是這樣的：

$scope.colourFilter = function(fruit) {
    if ($scope.colourIncludes.length > 0) {
        if ($.inArray(fruit.colour, $scope.colourIncludes) < 0){
            return false;
        }
    }
    return true;
}