Как правильно комбинировать строки и переменные при применении ng-класса через выражение?

Когда мое приложение инициализируется, следующая реализация ng-class работает, как и ожидалось, и имя класса применяется правильно. Однако, когда значение person.status изменяется во время выполнения, класс остается прежним.

Вот мой код:

ng-class="{ 'avatar--{{ person.status }}' : myBool }"

Как я могу изменить форматирование, чтобы при изменении значения person.status менялся и мой класс?

Пример: если для person.status установлено значение online при инициализации приложения, применяется класс avatar--online. Однако, если их статус изменится на offline в текущем сеансе, класс останется avatar--online.


angularjs ng-class
person Jack Roscoe    schedule 05.04.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я не пытался использовать угловое выражение в части имени класса ng-класса. но вы можете добиться того, чего хотите, с помощью этой реализации

ng-class="{'avatar--online': person.status == 'online',
           'avatar--offline': person.status == 'offline'}"

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

Надеюсь это поможет.

person Dev_Corps    schedule 05.04.2016
comment
в случае нескольких статусов (2-3) это лучший вариант, возможно немного многословно в случае нескольких статусов. - person thegio; 05.04.2016

arrow_upward
3
arrow_downward

Если вы можете найти способ использовать mybool, попробуйте следующее:

ng-class="'avatar--' + person.status"

Фрагмент рабочего кода:

var app = angular.module('myapp', []);
app.controller('mycontroller', function($scope) {
  $scope.colors = ['blue', 'green'];
  $scope.color = $scope.colors[0];


});
.mydiv {
  width: 200px;
  height: 50px;
  background-color: grey;
}
.prefix--blue {
  background-color: blue;
}
.prefix--green {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="mycontroller">
  <select ng-model="color" ng-options="c for c in colors"></select>
  <div class="mydiv" ng-class="'prefix--'+color"></div>
</div>

person fikkatra    schedule 05.04.2016
comment
Я не стал использовать это решение, но я нашел его полезным. Благодарю вас! - person Jack Roscoe; 05.04.2016