angularjs的三目运算

时间:2024-08-25 19:07:32

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

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

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>

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