代码之家 › 专栏 › 技术社区 › Ivin Raj

在AngularJS中内联if else

angularjs javascript

Ivin Raj · 技术社区 · 7 年前

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

如果 {{product.interaction}} == 'CAUTION' 意思是跨距颜色是红色,知道吗?是吗?

1 回复 | 直到 7 年前

Aleksey Solovey 7 年前

ng-style 有条件的( )用于检查某些字符串并给出特定样式的运算符。这是它的样子:

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

其他的

只需扩展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>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前