如何与 ng-class 中的字符串进行比较？答案

【问题标题】：How do I compare with a string in ng-class?如何与 ng-class 中的字符串进行比较？
【发布时间】：2014-08-07 21:01:25
【问题描述】：

这条线似乎不适合我。

Sort By: <a href="" ng-click="setOrder('title')" ng-class="{active: orderProp == 'title'}">Alphabetical</a>

我是否必须以某种方式在 orderProp == 'title' 中转义 'title'？

在我拥有的控制器中

...
$scope.orderProp = 'title';
$scope.setOrder = function(sortBy){
            $scope.orderProp = sortBy;
}
...

谢谢

更新： 使用 v1.3.0-beta.17

将ng-class="{active:orderProp=='pagetitle'} 添加到

<a href="" ng-click="setOrder('pagetitle')" ng-class="{active:orderProp=='pagetitle'}">Alphabetical</a>

抛出错误

"Error: [$parse:syntax] http://errors.angularjs.org/1.3.0-beta.17/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=%7Bactive%3AorderProp%3D%3D&p4=%7Bactive%3AorderProp%3D%3D

对不起，我提出错误的方式，但我上周刚开始有角度，不知道更好的方法

更新 2： 错误似乎来自 = == ===。我尝试了 > 并没有发生错误。是否有替代语法来like eq？

使用解决方法更新 3

我将每个字符串映射到一个 int pagetile->1 code->2 + data-ng-class="{active:orderPropIdx==1};" 在控制器内部，如果 pagetitle 设置为 active:orderPropIdx 以此类推，我会这样做

也许这是 Angular 1.3 中的一个错误

【问题讨论】：

不确定是不是我在控制台中得到了一些奇怪的 html，但我没有看到任何类属性
你能提供一个fiddle吗？
会尝试，在此之前也许你有时间阅读更新。谢谢
无法重现您的错误，真的。
你试过单引号'active'吗？

标签： angularjs ng-class

【解决方案1】：

如 cmets 中所述，您的班级名称应用单引号括起来。

ng-class="{'active': orderProp == 'title'}">

此比较区分大小写。

【讨论】：

【解决方案2】：

在使用 ng-class 时遇到了同样的问题。即使表达式计算成功，它也拒绝动态计算类属性。

这是我用于 ng-class 语句的解决方法：

Sort By: <a href="" ng-click="setOrder('title')" class="{{orderProp == 'title' ? 'active' : ''}}">Alphabetical</a>

我已经切换到class="{{orderProp == 'title' ? 'active' : ''}}"，而不是ng-class="{active: orderProp == 'title'}

【讨论】：

我正在经历同样的事情。 @Dan 我在 1.3.5 上，我看到表达式计算正确，但 ngClass 没有应用这些类。
这就是我给出解决方法的原因:)。如果有帮助请投票

【解决方案3】：

我这样解决； 'ClassName':'{{Value}}'=='StringtoCompare', ...

ng-class="{ 'btn-danger' : '{{datasource.difficoltaRicetta}}'=='Difficile', 'btn-warning' :'{{datasource.difficoltaRicetta}}'=='Intermedia', 'btn-success' : '{{datasource.difficoltaRicetta}}'=='Facile'}"

【讨论】：

【解决方案4】：

我将每个字符串映射到一个 int pagetile->1 code->2 + data-ng-class="{active:orderPropIdx==1};"如果 pagetitle 设置为 active:orderPropIdx 为 1 等等，我会在控制器内部执行此操作

也许这是 Angular 1.3 中的一个错误

【讨论】：

【解决方案5】：

这适用于通过[ngClass] 寻求解决方案的人。

<a [ngClass]="{ active: selectedValue === 'foo bar' }"> FooBar </a>

当变量selectedValue 被赋予值"foo bar" 时，这将导致将class="active" 添加到锚元素。

【讨论】：

【解决方案6】：

ng-class 的语法有时会很混乱。试试这个。

ng-class="{true: 'active', false: ''}[orderProp === 'title']"

在花括号后包含方括号。在方括号内，您可以声明任何表达式，并声明您的结果（真/假）和您要应用的相应类（活动）。并确保在您的表达式中使用 '==='，表示您希望 orderProp 完全等于与您比较它的对象。

【讨论】：

不适合我。我得到错误：[$parse:syntax] angularjs.org/1.3.0-beta.17/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=%7Btrue%3A&p4=%7Btrue%3A
也不适合我。这绝对不是解决方案。