如何在ng类中与字符串进行比较？

Question

这一行对我来说似乎并不适用。

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版本。 使用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

很抱歉我的错误呈现方式，但我上周刚开始使用angular，不知道有什么更好的方法。

更新2:错误似乎来自= == ===。 我试过>，但没有发生错误。有没有像eq一样的替代语法？

更新3：解

我把每个字符串映射到一个int pagetile->1 code->2 + data-ng-class="{active:orderPropIdx==1}; "在控制器里面我只做if pagetitle设置active:orderPropIdx为1，以此类推。

也许这是angular 1.3中的一个bug。

Answer 1

正如评论中所说，你的类名应该用单引号包围。

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

这个比较是区分大小写的。

Answer 2

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

这是我对ng-class语句使用的变通方法。

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

取而代之的是 ng-class="{active: orderProp == 'title'} 我已经换成了 class="{{orderProp == 'title' ? 'active' : ''}}"

Answer 3

我是这样解析的;'ClassName':'{{Value}}'=='StringtoCompare', ...

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

Answer 4

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

也许这是angular 1.3中的一个bug。

Answer 5

这是为那些来这个答案的人寻找解决方案的 [ngClass].

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

这将导致增加 class="active" 当变量 selectedValue 给定值 "foo bar".

Answer 6

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

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

在大括号后面加上方括号。在方括号内，你可以声明任何表达式，并声明你的结果（truefalse）和你想应用的相应类（active）。 而且一定要在表达式中使用'=='，表示你希望 orderProp 是 恰好 与你所比较的。