web-dev-qa-db-ja.com

Angularブール値を持つng-switch

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

angularjsng-switch
14
Isuru

真の値をチェックするだけの場合は、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

15
OddEssay

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

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

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

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

Ng-switchから{{}}を削除する必要があります。これを変更してください<div ng-switch={{Item.ItemDetails.IsNew}}>から<div ng-switch=Item.ItemDetails.IsNew>

1
vmontazeri

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ファイル）のlogic-controllers領域に保持することをお勧めします。 ng-html-safe AngularJSディレクティブをそれらのサニタイズ機能と組み合わせて使用​​して、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;
    }
}
0
C.D.