Какой синтаксис выражения angularjs таков в ng-классе

AngularJS Noob Handbook содержит некоторый код, который уменьшает манипуляции класса с простым выражением и привязкой:

<a ng-click="flags.open=!flags.open">...<div ng-class="{active:flags.open}">

Однако, что такое синтаксис выражения в ng-классе? Я понимаю, что вертикальная полоса (|) будет проходить через фильтр и что фильтр может передаваться параметрами после двоеточия, но вышеуказанный код делает что-то другое. Если переменная области справа имеет значение true, то выражение слева включено, в противном случае оно было отброшено.

Является ли это специфическим для директивы ng-class? Есть ли какая-то документация по http://docs.angularjs.org, которая объясняет это?

Ответ 1

Об этом кратко сказано (слишком кратко, на мой взгляд) в документации ngClass. Если вы передадите объект в ngClass, тогда он будет применять каждую клавишу объекта как класс к элементу, если это ключевое значение истинно. Например:

$scope.first = true
$scope.second = false
$scope.third = true

<div ng-class="{a: first, b: second, c: third}"></div>

приведет к

<div class="a c"></div>

Ответ 2

вы, вероятно, тоже видели что-то вроде этого:

<div ng-class="{true: 'complete'}[item.Id != 0]"></div>

Сильный синтаксис.

EDIT: Что здесь происходит, так это то, что "complete" class добавляется к элементу if(item.Id != 0). В качестве альтернативы мы могли бы написать: <div ng-class="{false: 'cookieless'}[monsterEatsCookies('Elmo')]. Поскольку он определен функцией monsterEatsCookies, Elmo не кушает файлы cookie, так как эта функция возвращает false, элемент html получает класс под названием cookieless.

Простой пример: <div ng-class="{false: 'DoubleNegative'}[1 == 0]. 1 !== 0, который является "false" - к элементу добавляется класс <<2 → .

<div ng-class="{  true:   'complete'  } [item.Id != 0]"></div>

            | |      | |          | | |            |
            | |result| |className | | |            |
            |                     | | |            |
            |       function      | | | condition  |

Добавление

Кроме того, я просто понял, что вы можете использовать различные ключи для сопоставления с вашим состоянием. Например:

ng-class="{ true: 'highlight', undefined: 'mute' }[ item.hasValue ]"

Класс mute будет применяться, если элемент не имеет свойства "hasValue". Кроме того, вы можете применить класс для любого заданного типа или значения:

{'Jonathan Chapman': 'embolden', '[object Object]': 'hide'}[ item.toString() ]

В следующем сборнике это украсит имя человека, скрывая объекты, которые являются объектами:

[
    'Jonathan Chapman',
    { aka: 'Johnny Applyseed' },
    'Brad Pitt',
    { details: 'Fights Zombies' }
]

При этом вы можете наблюдать за определенными значениями в любом свойстве $scope. Полагаю, это время от времени может оказаться очень полезным.

Приветствия

Ответ 3

ng-click="flags.open=!flags.open"

измените значение flags.open на true или false.
И

ng-class="{active:flags.open}"

решает, присутствует ли класс active или нет на основе значения flags.open.
См. Fiddle, демонстрирующий приведенный выше пример.

Ответ 4

Здесь вы можете передать выражение с фильтром:

 <div ng-class="{ 'customer-page': ('customer' | isRoute), 
  'orders-page': ('orders' | isRoute)  }">....</div>

Ответ 5

как этот пример ниже:

div(ng-class=" condition ? ['class_one', 'class_two'] : ['class_three', 'class_four']")