logo标签列表

Angular中的ng-switch指令与布尔值

angularjsng-switch
17

我想使用Angular的ng-switch来检查布尔数据。

这是我的代码，但它没有起作用。

<div ng-switch={{Item.ItemDetails.IsNew}}>
    <div ng-switch-when="true">
         <p class="new fontsize9 fontWeightBold">NEW</p>
    </div>
 </div>
    <div ng-switch={{Item.ItemDetails.IsFeatured}}>
         <div ng-switch-when="true">
               <div class="featured">
                    <p class="fontWeightBold fontsize8">featured</p>
               </div>
         </div>
     </div>

{{Item.ItemDetails.IsNew}}和{{Item.ItemDetails.IsFeatured}}的值为true或false。

ng-switch 已经期望一个表达式，所以在 {{ }} 中包裹它是这里的错误。 - Hafthor
5个回答
23

将布尔值转换为字符串：

<div ng-switch="Item.ItemDetails.IsNew.toString()">
    <div ng-switch-when="true">
1
这个答案不起作用（ng-switch期望一个表达式，所以花括号是不必要的），但是答案的意图实际上是正确的，应该被接受：ng-switch-when需要一个字符串。如果你在ng-switch测试中有一个布尔值，使用toString()将其转换为“true”或“false”就是解决方案。 - sumizome
这个答案对我也起作用了。我需要使用 ng-switch 来避免在使用两个相反的 ng-if 语句时出现 DOM 闪烁问题。ng-switch-when="true" 与 ng-switch-default 结合使用有助于解决它。 - Nathan Beck
15
如果您仅想检查真值，ng-if似乎更合适，并减少了额外包含代码的div的需要，从而减少了样本大小：
<div ng-if="Item.ItemDetails.IsNew">
    <p class="new fontsize9 fontWeightBold">NEW</p>
</div>
<div class="featured" ng-if="Item.ItemDetails.IsFeatured">
    <p class="fontWeightBold fontsize8">featured</p>
</div>

完整文档请见：http://docs.angularjs.org/api/ng.directive:ngIf

如果您无法升级，ng-show可以作为替代方案。否则，您需要编辑ng-switch={{Item.ItemDetails.IsNew}}为ng-switch="Item.ItemDetails.IsNew"（不要使用花括号，值用引号括起来）。但是，我不确定它是否能正常工作，因为switch通常用于评估字符串，所以布尔值可能会有些古怪。 - OddEssay
4
是的，OddEasy，不使用花括号 ng-switch="Item.ItemDetails.IsNew" 也可以正常工作。非常感谢。 - Isuru
4
这是建议采用不同的方法，而非对问题的回答。 - Alex Lapa
6
这个语法对我来说可行：

    <div ng-switch="Item.ItemDetails.IsFeatured">
     <div ng-switch-when="true">FEATURED ITEM HTML</div>
     <div ng-switch-default>REGULAR ITEM HTML (not featured)</div>
    </div>
1
你应该从ng-switch中删除{{}}: 将这个 <div ng-switch={{Item.ItemDetails.IsNew}}> 改为 <div ng-switch=Item.ItemDetails.IsNew>
0

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">
<!-- add your other code, like a table code here -->
<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;
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接