ng-switch的属性值被解释为字面字符串值以进行匹配。 (这意味着不能是表达式。)例如,ng-switch-when =“someVal”将与字符串“someVal”匹配,而不是与表达式$scope.someVal的值匹配。
如果您确实需要使用ng-switch,则可以通过.toString()javascript方法的解决方法强制半使用评估表达式。 示例,使用作用域变量数字'lastSortIndex'和布尔值'reverseSorted',以及AngularJS HTML变量'$ index':
<div ng-switch="((lastSortIndex === $index).toString()+(reverseSorted).toString())">
<div ng-switch-when="truetrue">
<span class="glyphicon glyphicon-chevron-up">{{ header }}</span>
</div>
<div ng-switch-when="truefalse">
<span class="glyphicon glyphicon-chevron-down">{{ header }}</span>
</div>
<div ng-switch-default>{{header}}</div>
</div>
请注意上面的示例是将布尔值连接在一起,然后评估它们的字符串内容。最好将此移入可调用函数中,该函数返回一个要在switch-case语句中评估的字符串。
尽可能地保持逻辑控制器区域(JavaScript文件)中的逻辑。您可以使用ng-html-safe AngularJS指令与其Sanitize功能结合使用,以调用JavaScript中的函数,为您返回所需的HTML代码片段。例如:
index.html:
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.3.13/angular-sanitize.js">
</head>
<body ng-controller="MainController">
<div ng-bind-html="HeaderSortIcon(lastSortIndex, $index, reverseSorted, header)">
</div>
</body>
script.js:
var myApp = angular.module('myApp ', ['ngSanitize']);
$scope.HeaderSortIcon = function (lastSortIndex, $index, reverseSorted, header) {
if (lastSortIndex === $index) {
if( reverseSorted )
{
return '<div><span class="glyphicon glyphicon-chevron-up"></span>' + header + '</div>';
}
else{
return '<div><span class="glyphicon glyphicon-chevron-down"></span>' + header + '</div>';
}
}
else {
return header;
}
}