javascript - ngAttr 与 Angular 的条件属性

Question

我在 HTML 元素上有一个属性，我想根据一系列条件为其提供一个值。

例如，如果article.fields.category==='Example One'，我想为我的元素提供属性am-icon，其值为示例一。但是，如果article.fields.category==='Another Example'，则需要值another-example，依此类推整个列表。

我已经尝试过这个:

<i ng-attr-am-icon="{'example-one': article.fields.category==='Example One' || 'another-example': article.fields.category==='Another Example' || || 'third-example': article.fields.category==='Third Example'}"></i>

这不应用该属性，我很确定我写错了。但我似乎找不到有关 ngAttr 的文档或如何执行此操作的示例。

根据满足的条件，期望的结果将是以下之一:

<i am-icon="example-one"></i>
<i am-icon="another-example"></i>
<i am-icon="third-example"></i>

Answer 1

<i ng-attr-am-icon="{'example-one': article.fields.category==='Example One', 
                     'another-example': article.fields.category==='Another Example', 
                     'third-example': article.fields.category==='Third Example'}">
</i>

<小时/>

实际上上面的方法可能效果不太好，但@Deepika Kamboj 值得投票。为了纠正我的错误，也许......

<i ng-attr-am-icon="{{ getAttr(article.fields.category) }}"></i>

和

$scope.getAttr = function(val)  {
  return ($filter('lowercase')(val)).replace(' ', '-');
};