Угловой стиль ng с более чем двумя условными выходами

Стиль моего текста зависит от трех условий:

условие1: цвет должен быть зеленым

условие2: цвет должен быть синим

условие3: цвет должен быть красным

Таким образом, есть 3 выхода для одного и того же стиля (цвета).

Я мог бы придумать следующее выражение:

<p ng-style="condition1  ? { color:'green' } : { color: 'blue' }">

Есть ли способ изменить приведенный выше код так, чтобы он мог учитывать все 3 условия и выходы?

EDIT: есть обходные пути для достижения этого с помощью контроллера; но мне было интересно, можно ли это сделать в самом html


angularjs ng-style
person Saurabh Verma    schedule 19.05.2017    source источник
comment
Как насчет функции в контроллере, чтобы считать это для вас?   -  person tanmay    schedule 19.05.2017
comment
Да, есть обходные пути для достижения этого с помощью контроллера; но мне было интересно, можно ли это сделать только в html..   -  person Saurabh Verma    schedule 19.05.2017

Ответы (2)


arrow_upward
2
arrow_downward

Применяйте цвет только в том случае, если какое-либо из условий истинно, и используйте оператор ?: для проверки других условий со значением false. Не применяйте стиль, если ни одно из условий не выполняется.

var app = angular.module("MyApp", []).controller("MyCtrl", function ($scope) {
    $scope.cond1 = false;
    $scope.cond2 = false;
    $scope.cond3 = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="MyApp">
  <div ng-controller="MyCtrl">
     <p ng-style="cond1  ? { color:'green' } : cond2 ? {color: 'blue'} : cond3 ? {color: 'red'} : {color: ''}">Hello World!</p>
  </div>

</body>

person Sajal    schedule 19.05.2017

arrow_upward
1
arrow_downward

вы можете просто сделать это так:

<p ng-style="condition1  ? { color:'green' } : condition2 ? { color:'blue' } : { color:'red' }">
person fadi idoudi    schedule 06.12.2018