разница между тернарным оператором ng-класса и вычислением выражения

Question

разница между тернарным оператором ng-класса и вычислением выражения

0

У меня есть выражение ng-class="myVal > 0? 'myClass': 'none'", где myVal получает значение после некоторого запроса ajax в контроллере.

Проблема в том, что иногда myVal получает новое значение в контроллере, но указанный класс не обновляется в представлении.

Однако выражение, подобное ng-class="{'myClass': myVal > 0}" дает правильный результат каждый раз.

Какая разница между двумя? или я должен использовать ngClass по-разному?

user2692032 21 июль 2016, в 10:55

Источник

0

Они разные. Первый переключается между myClass и none . Последнее переключает myClass . Эквивалентная версия должна быть ng-class="{'myClass' : myVal > 0, 'none': myVal <= 0}" . Кстати, оба варианта должны работать демо .
Yury Tarabanko 21 июль 2016, в 08:15

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Они разные. Первый переключается между myClass и none . Последнее переключает myClass . Эквивалентная версия должна быть ng-class="{'myClass' : myVal > 0, 'none': myVal <= 0}" . Кстати, оба варианта должны работать демо .

manzapanza · Answer 1 · 2016-07-21T06-05-00.000Z

Директива ngClass принимает выражение как строку, объект и массив. Проверьте документацию о ngClass

контроллер:

// string
$scope.myClassString = 'my-style';

// object
$scope.myClassObject = {
    'my-style-a': true, // true expression 
    'my-style-b': 2 > 1, // true expression 
    'my-style-c': false // false expression style not applied
};

// array with mixed values
$scope.myClassArray = [
    'my-style-d',
    {
        'my-style-e': true, // true expression 
        'my-style-f': false // false expression style not applied
    }
];

Посмотреть:

<div ng-class="myClassString"> 

</div>

<div ng-class="myClassObject"> 

</div>

<div ng-class="myClassArray"> 

</div>

ИЛИ

<div ng-class="'my-style'""> 

</div>

<div ng-class="{'my-style-a': true, 'my-style-b': 2 > 1, 'my-style-c': false}"> 

</div>

<div ng-class="['my-style-d', {'my-style-e': true, 'my-style-f': false }]"> 

</div>