AngularJS - $watch 的问题

Question

如果用户是我商店网站上“高”组的成员，我正在尝试删除产品 SKU 上的“红色”和“蓝色”下拉列表选项。我想出的代码如下，但仅部分有效；唯一有效的是窗口警报。现在，如果我删除有关查找用户组的逻辑，那么它确实可以工作，但是用户必须设置颜色下拉列表的值才能开始。

function SpecController($scope) {
    angular.forEach($scope.user.Groups, function (g) {
        if (g.Name == "High") {
            alert('You are in the correct group!');
            $scope.$watch('user.Groups.Name', function (val) {
                if (!val) return;
                if (val == "High") {
                    $scope.Variant.Specs.Color.Options = $scope.Variant.Specs.Color.Options.filter(function (item) {
                        return item.Value !== 'Red' && item.Value !== 'Blue';
                    });
                }
            });
        }
    });
}

Answer 1

您的目标是监视groupName，它位于Groups 对象的每个Group 内。所以你当前的观察者指向user.Groups.Name，它实际上并不存在。如果你想让你当前的代码工作，那么你可以在索引时使用$watch

代码

function SpecController($scope) {
    angular.forEach($scope.user.Groups, function (g,index) { //added index param here
        if (g.Name == "High") {
            alert('You are in the correct group!');
            //used that index param here to put watch on each group.
            $scope.$watch('user.Groups['+ index + '].Name', function (val) { 
                if (!val) return;
                if (val == "High") {
                    $scope.Variant.Specs.Color.Options = $scope.Variant.Specs.Color.Options.filter(function (item) {
                        return item.Value !== 'Red' && item.Value !== 'Blue';
                    });
                }
            });
        }
    });
}

注意

当你有超过 1000 个 groups 时，这个解决方案会搞砸 user.Groups，观察者数量将增加，结果将是 应用会运行缓慢。