Question

我有一个HTML元素的属性，我想根据一系列条件给出一个值。

例如，如果article.fields.category==='Example One'我想为我的元素提供值为am-icon的属性example-one。但是，如果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(' ', '-');
};

Answer 2

我这样做的方法是在控制器中创建一个方法来评估条件并返回结果。这种方法的优点是你可以测试控制器中的逻辑，这在html中是不可能的。

<i am-icon="getResult(article.fields.category)"></i>

在控制器中：

＆＃13;

$scope.getResult = function(category) {
   if(category === 'Example One'){
      return 'Example One';
   }
   else if(category === 'another-example'){
      return 'another-example';
   }
};

＆＃13;

带有Angular的ngAttr用于条件属性

2 个答案: