Javascript 为什么过滤器在阵列上更改元素时不会'；t在角上工作？

我肯定我做错了什么，但即使在Angular.js上调试，我也找不到错误

我在这里学习angular basic教程： 教程中的所有示例都很好。 但我想尝试一些角度很酷的特性，并在步骤3的示例中添加了自己的代码

index.html：

controller.js

过滤器定义如下：

一旦我使用复选框启用大写，就会产生以下错误：

错误：[$rootScope:infdig]已达到10$digest（）次迭代。流产！ 在过去5次迭代中被解雇的观察者：[“fn:$watchCollectionWatch；newVal:62；oldVal:59”]，[“fn:$watchCollectionWatch；newVal:65；oldVal:62”]，[“fn:$watchCollectionWatch；newVal:71；oldVal:68”]，[“fn:$watchCollectionWatch；newVal:74；oldVal:71”] $rootScope/infdig？p0=10&p1=%5B%5B%22fn%3…20%24watchCollectionWatch%3B%20newVal%3A%2074%3B%20oldVal%3A%2071%22%5D%5D 在 范围为$get.Scope.$digest（） 范围为$get.Scope.$apply（） 在HTMLInputElement。() 在 at Array.forEach（本机） 在forEach（） 在HTMLInputElement.eventHandler（）上

---

我不知道这样做是否是最好的做法，但我想知道为什么失败了，因为我正在做的唯一一件事是用另一个数组的转换内容创建一个新数组，这没关系？？？

正如Angular的文档中提到的：

当应用程序的模型变得不稳定且 每个$digest循环都会触发状态更改和后续的$digest 周期Angular检测这种情况并防止无限循环 使浏览器变得无响应

在每个摘要周期中，您的过滤器都会返回一个新数组，由于AngularJS通过脏检查进行监视，它会触发一个新的摘要周期，因为您的过滤器发送的新值与以前发送的值不同

我认为有两种方法可以解决您的问题：

1） 如果使用的函数给出相同的参数，则发送相同的对象

在每次调用memoize函数时，解析器（为memoize提供的第二个函数）都会查看缓存中是否存储了结果（默认情况下，解析器返回第一个参数，该参数转换为附加了一些乱码的字符串）。如果找到结果，则返回该结果。否则，将计算函数并将返回值存储在缓存中

    phonecatApp.filter('uppercaseAllThings', function () {
        return _.memoize(
        function (items, enabled) {
            if (enabled) {
                var newitems = [];
                angular.forEach(items, function (item) {
                    newitems.push(uppercaseAllAttributes(item));
                });

                return newitems;
            }
            return items;
        },
        function (items, enabled) {
            return enabled + angular.toJson(items)
        });
    });

可以找到解释此解决方案的JSFIDLE

2） 如果您只想将该值设置为大写，则可以使用CSS通过条件应用CSS类来完成该工作

我们将有条件地应用的CSS类将使用

必须将此类添加到样式表中

HTML将从

<li ng-repeat="phone in phones | filter:query | orderBy:orderProp | uppercaseAllThings:uppercaseEnabled">
   <span>{{phone.name}}</span>
   <p>{{phone.snippet}}</p>
</li>

{{phone.name}
{{phone.snippet}

到

{{phone.name}
{{phone.snippet}

---

我已经简单地解释了第二种解决方案。

如果我的答案对您有用，那么接受它将是非常好的。否则，如果你有问题，我很乐意编辑它。

<li ng-repeat="phone in phones | filter:query | orderBy:orderProp | uppercaseAllThings:uppercaseEnabled">
   <span>{{phone.name}}</span>
   <p>{{phone.snippet}}</p>
</li>

<li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
    ng-class="{'uppercase':uppercaseEnabled}">
   <span>{{phone.name}}</span>
   <p>{{phone.snippet}}</p>
</li>