ng-class 允许赋值运算符。是错误还是功能？

Question

我最近注意到 ng-class 允许赋值运算符是错误还是功能。

<li ng-repeat="cat in cats" ng-class="{active: cat = 'some-text'}">{{cat}}</li>

正确用法

<li ng-repeat="cat in cats" ng-class="{active: cat == 'some-text'}">{{cat}}</li>

允许赋值运算符是错误还是功能？

Answer 1

这是因为，当您为 cat 赋值时，它的计算结果为真，因为 cat 不为空或未定义

Answer 2

如果你需要使用 class active with ng-class 试试这个:

<li ng-repeat="cat in cats" ng-class="{'active': cat == 'some-text'}">{{cat}}</li>

Answer 3

这更像是一个 JavaScript 表达式求值，而不是一个特殊的 Angular 东西。

var x;
console.log(!!(x = 'some-text'));

如果您看到您的控制台，它将始终打印 true。类似地，ng-class="{active: cat = 'some-text'}" 将始终将 class active 分配给元素，因为 cat = 'some-text' 将始终 return true 作为其布尔等价物。

此外，值得注意的是 cat 将在每次迭代中更改为 some-text。这意味着您的 cats 对象将只是一个 some-text.

的数组

正如@Mr_Perfect在评论中提到的，如果您有条件地需要将active分配给您的元素，请将=更改为===。

Answer 4

{'active': cat === 'some-text'} 是添加 class 的正确方法，some-text 只是一个字符串，如果它与变量 cat 匹配，则 active class 将添加到 li 元素

你也可以这样做，

ng-class="{(condition) ? 'condition_true_class' : 'condition_false_class'}"

编辑

<li ng-repeat="cat in cats" ng-class="{active: cat = 'some-text'}">{{cat}}</li>

在这种情况下 cat="some-text" returns some-text 始终为真的字符串 active class 将被添加到 li 元素和{{}} 中的 cat 变为 some-text，因为您正在使用赋值运算符。

<li ng-repeat="cat in cats" ng-class="{active: cat == 'some-text'}">{{cat}}</li>

在这种情况下，如果 cat 值与 some-text 匹配，则 active class 将添加到 li 并且 cat 值将不会改变，因为您使用的是逻辑运算符 == 或 ===

Answer 5

在 GitHub 中提出问题并得到澄清

ng-class allows assignment operator. is it a bug or feature?