17

我想用角度 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}} 的值为真或假

4

5 回答 5

23

将布尔值转换为字符串：

<div ng-switch="Item.ItemDetails.IsNew.toString()">
    <div ng-switch-when="true">
于 2015-01-06T09:37:49.937 回答
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

于 2013-12-09T12:33:54.397 回答
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>
于 2016-07-14T07:30:31.093 回答
1

您应该从 ng-switch 中删除 {{}}：将其更改<div ng-switch={{Item.ItemDetails.IsNew}}> 为<div ng-switch=Item.ItemDetails.IsNew>

于 2017-01-12T02:06:28.003 回答
0

ng-switch 的属性值被解释为要匹配的文字字符串值。（意味着不能是表达式。）例如，ng-switch-when="someVal" 将匹配字符串“someVal”而不是表达式 $scope.someVal 的值。

如果你真的必须使用 ng-switch，它可以通过 .toString() javascript 方法的变通方法强制半使用评估表达式。例如，使用范围变量 numeric 'lastSortIndex' 和 boolean '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 代码片段。例子：

索引.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>

脚本.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;
    }
}
于 2019-10-08T00:23:39.620 回答