Как установить атрибут условно в AngularJS

Question

У меня есть элемент span, отображающий некоторое значение. Если значение не 0, я хочу, чтобы применить некоторые styleClass к элементу:

<span styleClass="alert-error">{{value}}</span> 

В противном случае, если значение равно 0, я не хочу, чтобы применить styleClass. Пустой styleClass атрибут был бы приемлем:

<span styleClass="">{{value}}</span> 

Как я могу сделать это с AngularJS?

Answer 1

Здесь вы идете (только использовать тройной оператор):

<span styleClass="{{value == 0 ? '' : 'alert-error'}}">{{value}}</span> 

Edit:

Для атрибута класса просто к тому же, как и другие уже упоминали:

<span class="{{value == 0 ? '' : 'alert-error'}}">{{value}}</span> 

Кроме того, вы можете использовать ng-class:

0 Использование

Answer 2

Попробуйте это ...

Сделать из ng-class

<span ng-class="{{value == 0 ? '' : 'alert-error'}}">{{value}}</span> 

Answer 3

раствора @shashank хорошо.

Я всегда предпочитаю иметь логическую часть в контроллере или обслуживании. Мое решение было бы как

$scope.getStyleCSS = function() { 
    if ($scope.getValue() !== 0) { 
     return 'alert-error'; 
    } 
    return ''; 
} 

$scope.getValue = function() { 
    return $scope.value; 
} 

HTML

<span styleClass="getStyleCSS()" ng-bind="getValue()"></span> 

Предпочтительно использовать ngBind вместо {{выражение}}, если шаблон моментально отображается в браузере в сыром состоянии прежде чем Угловая компиляция. Поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы.