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}} являются истинными или ложными

Ответы

Ответ 1

Если вы просто проверяете истинные значения, 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

Ответ 2

Преобразуйте логическое значение в строку:

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

Ответ 3

Этот синтаксис работает для меня:

    <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

Вы должны удалить {{}} из ng-переключателя: Измените этот <div ng-switch={{Item.ItemDetails.IsNew}}> до <div ng-switch=Item.ItemDetails.IsNew>

Ответ 5

Значение атрибута ng-switch интерпретируется как литеральные строковые значения для сравнения. (Это означает, что это не может быть выражением.) Например, ng-switch-when = "someVal" будет сопоставляться со строкой "someVal", а не со значением выражения $ scope.someVal.

Если вам действительно нужно использовать ng-switch, он может быть вынужден полу-использовать оценочные выражения с помощью обходного пути метода .toString() javascript. Пример с использованием числовых переменных области видимости "lastSortIndex" и логического значения "reverseSorted", а также HTML-переменной AngularJS "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>

Обратите внимание, что приведенный выше пример объединяет логические значения вместе, а затем оценивает их строковое содержимое. Было бы лучше перенести это в вызываемую функцию, которая возвращает строку для оценки в переключателе.

Хотя я бы порекомендовал вам, если это возможно, сохранить логику в области логических контроллеров кода (файлы javascript). Вы можете использовать директиву AngularJS ng-html-safe в сочетании с их функцией 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;
    }
}