angularjs的三目运算

Posted 2020-08-24 任小小

前言：前几天写代码的时候遇到一个问题，有一个按钮，有“已关注”和“+关注”两种状态，需要对这两种状态的按钮的背景颜色进行区分，单后点击“已关注”按钮状态变成“+关注”，相反，点击“+关注”按钮变成“已关注”相应的背景颜色都需要发生改变。

点击事件里面改变按钮的背景颜色：

angular.element(path).css(‘background‘, ‘blue‘);//改变按钮的背景颜色  path：按钮的路径

这个能实现点击的时候改变背景颜色，但是在最开始从数据库里面读出来的时候并没有进行区分，这样写也不适用于最初的区分，于是想到了三目运算，但是angualarjs的三目运算并没有写过，倒腾了半天，终于解决：

<button class="bottonflag botton1" ng-click="changeBtn(li.id)" style="{{li.flag === ‘已关注‘ ? ‘background: blue‘ : ‘background : pink‘}}">{{li.flag}}</button>

通过按钮的值判断，如果值等于“已关注”就将背景颜色设为蓝色，否则背景颜色就为粉色，值得注意的是，这个外面要加“{{}}”，因为里面涉及到了从数据库里面都出来的值。