javascript - AngularJS 中的 ng-repeat 内部的赋值运算符有何作用？

Question

我正在查看网页源代码，它具有以下 div 标签:

<div class="color-swatch" ng-if="quickOrderItem.colorNumber && !quickOrderItem.isCustomColor && filteredColors.length > 0" ng-repeat="color in filteredColors = (quickOrderItem.selectedSku.colorsArr | filterArrayOfObjects:quickOrderItem.colorNumber:'name':'colorNum' | limitTo:1 )">

我明白了大部分内容，但让我困惑的是最后一部分:

ng-repeat="color in filteredColors = (quickOrderItem.selectedSku.colorsArr | filterArrayOfObjects:quickOrderItem.colorNumber:'name':'colorNum' | limitTo:1 )"

为了简单起见，我将添加一些换行符以使其更易于阅读:

ng-repeat="color in filteredColors = (
quickOrderItem.selectedSku.colorsArr |     
filterArrayOfObjects:quickOrderItem.colorNumber:'name':'colorNum' |    
limitTo:1 )"

这到底是做什么的？据我所知，它正在遍历filteredColors数组，并将当前选择的每个颜色分配给变量color。 (基本上每个循环)

但我不知道其余的是什么意思。为什么“filteredColors 中的颜色”等于其他值？我不明白。此外，括号中的那三个独立的东西到底在做什么？

有人可以帮助我理解这一切意味着什么吗？

Answer 1

这个说法实际上是在一个衬里中使用了两个不同的 Angular 特征。这些是初始化器 filteredColors = ...，它初始化一个新变量来存储由其余 = (表达式) 生成的集合。这样做是为了在您需要在模板中进一步使用结果时捕获结果。表达式周围的括号仅用于确定 JavaScript 执行的范围。

第二个是 Angular 过滤器、过滤器管道和 Angular 过滤器上的自定义参数。您会看到 quickOrderItem.selectedSku.colorsArr 是一个 JavaScript 数组，因为它似乎被名为 filterArrayOfObjects 的自定义过滤器过滤，传递 3 个参数(由 分隔:)

1. 字段quickOrderItem.colorNumber
2. 字符串文字'name'
3. 字符串文字'colorNum'

过滤器用管道“|”分隔并且可以互相改变，这样一个结果就是下一个的输入。所以最后代码使用 limitTo使用数字 1 参数进行过滤，以便将结果限制为仅第一个。

更具可读性的等效内容可能如下，但仍然没有太大改进:

<div class="color-swatch" 
     ng-if="quickOrderItem.colorNumber && 
           !quickOrderItem.isCustomColor && 
            filteredColors.length > 0" 
     ng-init="filteredColors = quickOrderItem.selectedSku.colorsArr | filterArrayOfObjects:quickOrderItem.colorNumber:'name':'colorNum'| limitTo:1" 
     ng-repeat="color in filteredColors">
</div>