<div class="alcohol">
<img src="~/img/Interaction/alcohol.png" title="Alcohol" />
<span>{{product.interaction}}</span>
</div>
IF {{product.interaction}} == 'CAUTION' means Span color is red any idea??
Add a comment
|
1 Answer
Use ng-style with a conditional (ternary) operator that checks for some string and gives a specific style. Here is what it looks like:
<span ng-style="product.interaction=='CAUTION' ? {color:'red'} : ''">
{{product.interaction}}
</span>
(for else, to add color white)
Simply extend the else clause
<span ng-style="product.interaction=='CAUTION' ? {color:'red'} : {color:'white'}">
{{product.interaction}}
</span>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.product = {};
$scope.product.interaction = "CAUTION";
$scope.product.interaction2 = "ANYTHING"; // to show `else` variation
});<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="alcohol">
<span ng-style="product.interaction2=='CAUTION' ? {color:'red'} : {color:'white'}">
{{product.interaction2}}
</span>
<span ng-style="product.interaction=='CAUTION' ? {color:'red'} : {color:'white'}">
{{product.interaction}}
</span>
</div>
</div>
</body>
</html>2 Comments
Ivin Raj
else means white how to add ? @Aleksey Solovey
Aleksey Solovey
ternary operator has this syntax:
condition ? expression_if_true : expression_if_false, the false one is your else