angularjs - ブール値を持つAngular ng-switch

Question

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

score 23 · Accepted Answer

ブール値を文字列に変換します。

<div ng-switch="Item.ItemDetails.IsNew.toString()">
    <div ng-switch-when="true">

score 15 · Accepted Answer

真の値を確認するだけの場合は、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

score 6 · Accepted Answer

この構文は私にとってはうまくいきます：

    <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>

score 0 · Accepted Answer

ng-switch の属性値は、照合するリテラル文字列値として解釈されます。(式ではないことを意味します。) たとえば、ng-switch-when="someVal" は、式 $scope.someVal の値に対してではなく、文字列 "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 機能と組み合わせて使用して、必要な HTML コードのスニペットを切り替えて返す Javascript の関数を呼び出すことができます。例：

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;
    }
}

angularjs - ブール値を持つAngular ng-switch

5 に答える 5

Related

Reference