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

Question

这条线对我来说似乎不起作用。

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

我是否必须逃脱＆＃39; title＆＃39; in orderProp ==＆＃39; title＆＃39;不知何故？

在控制器中我

...
$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： 错误似乎来自= == ===。我试过＆gt;并且没有发生错误。是否有类似eq的替代语法？

使用解决方案更新3

我将每个字符串映射到一个int pagetile-＆gt; 1 code-＆gt; 2 + data-ng-class =＆＃34; {active：orderPropIdx == 1};＆＃34; 在控制器内部我只是将pagetitle设置为active：orderPropIdx为1，依此类推

也许这是角1.3中的错误

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

我将每个字符串映射到一个int pagetile-＆gt; 1 code-＆gt; 2 + data-ng-class =＆＃34; {active：orderPropIdx == 1};＆＃34;在控制器内部我只是将pagetitle设置为active：orderPropIdx为1，依此类推

也许这是角1.3中的错误

Answer 4

我这样解决; ＆＃39; ClassName＆＃39;：＆＃39; {{Value}}＆＃39; ==＆＃39; StringtoCompare＆＃39;，...

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

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']"

在花括号后面加上方括号。在方括号内，您可以声明任何表达式，并声明您的结果（true / false）和您想要应用的相应类（活动）。并确保使用＆＃39; ===＆＃39;在你的表达式中，表示你希望orderProp 与完全相同与你比较它。