javascript - 在angularjs中内联If else-6ren

javascript - 在angularjs中内联If else

转载作者：行者123 更新时间：2023-11-30 20:26:06

<div class="alcohol">
       <img src="~/img/Interaction/alcohol.png" title="Alcohol" />
       <span>{{product.interaction}}</span>
  </div>

IF {{product.interaction}} == 'CAUTION' 表示 Span 颜色是红色你知道吗？？

最佳答案

将 ng-style 与条件(三元)运算符一起使用，该运算符检查某些字符串并给出特定样式。这是它的样子:

<span ng-style="product.interaction=='CAUTION' ? {color:'red'} : ''">
  {{product.interaction}}
</span>

(对于else，添加白色)

简单地扩展else子句

<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>