Я пытаюсь настроить ng-класс для работы с div с двумя условиями:
ng-class="(accounts.length == 1 && account.cardName =='Cash') ? 'one-dash-cash': ''"
а также
ng-class="(accounts.length == 1 && account.cardName =='Points') ? 'один тире': ''"
Как лучше всего это сделать? Я читал, что у меня не должно быть всей этой логики в HTML, но я не уверен, как это сделать.
Заранее спасибо..
Вы можете передать карту js в ng-class.
<div ng-class="{
'one-dash-cash':accounts.length == 1 && account.cardName =='Cash',
'one-dash':accounts.length == 1 && account.cardName =='Points'
}"></div>
Таким образом, в зависимости от условия к элементу будет применен соответствующий класс.
ng-class ссылка https://docs.angularjs.org/api/ng/directive/ngClass
Ответы, предоставленные Шанкаром и пользователем 3227295, верны и работают правильно, но есть 2 альтернативных метода, которые вы можете использовать. Я не говорю, что они лучше, чем уже упомянутые, но знать о них лучше. Вот плункер, показывающий все три подхода.
Поместите свою логику в контроллер, а не в строку (что я бы использовал)
$scope.isOneDash = $scope.accounts.length == 1 && $scope.account.cardName =='Points';
$scope.isOneDashCash = $scope.accounts.length == 1 && $scope.account.cardName =='Cash';
И в вашем html
<div ng-class="{
'one-dash-cash': isOneDashCash,
'one-dash': isOneDash
}">Hello</div>
Используйте директиву атрибута. Это может быть излишним для вашего случая, но, безусловно, способ.
app.directive('dashOrCash', function() {
return {
retrict: 'A',
link: function(scope, elem) {
if (scope.accounts.length == 1 && scope.account.cardName =='Cash') {
elem[0].classList.add('one-dash-cash');
}
if (scope.accounts.length == 1 && scope.account.cardName =='Points') {
elem[0].classList.add('one-dash');
}
}
}})
