Question

我有一个药盒，我希望在用户点击时更改其背景。但是，除非我的inherit，否则我希望bg颜色为option.name == 'whatever。我不太清楚如何让一切都在一起工作。这是声明

<div
    class="pill-input"
    ng-repeat="option in field.options"
    ng-style="{'width': 'calc(100% / '+ {{field.options.length}} +')'},{option.name =='Low'?'background-color','#b4ce98'},{option.name =='Medium'?'background-color','#fccf84'},{option.name =='High'?'background-color','#d95969'}">

Answer 1

对于背景颜色，您可以使用条件运算符对其进行链接，如果option.name都不匹配低，中等，则最后将bgColor设置为initial。高

ng-style={'background-color' : (option.name =='Low') ? '#b4ce98' : ((option.name =='Medium') ? '#fccf84': ((option.name =='High') ? '#d95969': 'initial'))}

Answer 2

你不必（并且你不能，它会导致错误）在{{expression}}属性中使用小胡子符号（ng-*），因为它已经预期了一个表达式（任何东西）放入ng-*属性将根据当前范围进行评估，该范围继承所有父范围）。
ng-style可以使用多种类型的数据和参数，但我不认为传递多个逗号分隔的对象会自动合并为一个（没有尝试过 - 但我不会这么惊讶它奏效了。）但是，实际上，您不需要多个对象。只需指定每个属性以及您想要放入的任何属性，就像在任何其他JavaScript对象中一样：

<div ng-style="{
  prop1:expression1,
  prop2:expression2,
  // etc...
}">

所以你的标签看起来像......

<div class="pill-input"
     ng-style="{
       width: 'calc(100% / '+ field.options.length + ')',
       backgroundColor: option.name === 'Low' ? '#b4ce98' :
                        option.name === 'Medium' ? '#fccf84' :
                        option.name === 'High' ? 'd95969':
                        'initial'
   }"
>Div content here...</div>

正确添加ng-style中的多个表达式

2 个答案: