Question

解决在ng-repeat节点上拥有可选属性的问题的最佳方法是什么：

<div ng-repeat="slice in pizza" mozzarella>
  {{slice.name}}
</div>

我只希望mozzarella属性位于特定切片处。我怀疑没有简单的解决办法。也许有一个插件有一个很好的方法来解决这个问题？

我正在寻找的实现可能看起来类似于ng-class指令：

<div ng-repeat="slice in pizza" 
     ng-optional-attr="{'mozzarella': slice.mozzarella}">
  {{slice.name}}
</div>

Answer 1

您可以将参数添加到mozzarella的隔离范围，以确定它是否处于活动状态：

<div ng-repeat="slice in pizza">
  <mozzarella isActive="true/false">{{slice.name}}</mozzarella>
</div>

你的指令看起来像是：

angular.module('app', [])
.directive('mozzarella', function() {
  return {
    restrict: 'EA',
    transclude: true,
    scope: {
      isActive: '@'
    },
    link: function(scope) {
       if(scope.isActive){
          //Do stuff
       }
       else{
         //Do other stuff
       }
    },
    templateUrl: 'mozarella.html'
  };
});

Answer 2

另一种解决方案：使用ng-switch

<div ng-repeat="slice in pizza" mozzarella>
  <div ng-switch="shouldBeMozzarella()">
      <div ng-switch-when="true"> 
        <div mozzarella>{{slice.name}}</div>
      </div>
      <div ng-switch-when="false"> 
        <div>{{slice.name}}</div>
      </div>
</div>

我认为这不是那么好。它使您的HTML变得复杂并且有一些代码味道。

使用基于重复项的可选属性进行ng-repeat

2 个答案: