javascript - 我可以根据 $index 和 ng-repeat 对象的长度应用 css 类吗？

Question

我希望这个问题没有在其他任何地方得到解答。我正在尝试使用 ng-class 创建一个规则:

• 如果该元素在转发器索引中是$first，则显示firstTagClass
• 当该元素是转发器中唯一的元素时不显示
• 不使用 scope.objects.length(因为在这种特定情况下 scope.objects 不是数组而是对象)。

用例

可以作为裁剪头像图片并将它们保存在同一个容器中的一个很好的起点。

到目前为止...

我完成了第一个和第三个目标，但我仍然坚持第二个目标。我尝试添加第二个条件 !$last 但它不起作用。

<div 
  ng-repeat="object in objects" 
  ng-if="$index < 4 && object.id !== me.id" 
  ng-class="{firstTagClass: $first && !$last}">
</div>

有没有办法通过 ng-class 实现我的所有目标，或者我应该构建自定义指令？

预先感谢您的帮助。

哈德良

更新

我正在添加一个代码笔:http://codepen.io/anon/pen/ZYaBjW

Answer 1

我找到了一个使用指令的答案。您可以通过在此处删除 $scope.objects 中的第三个对象来检查解决方案:http://codepen.io/anon/pen/LEOopR

HTML

我添加了 block-style 指令并使用了 class 属性而不是 ng-class 因为我选择使用 element .removeClass() 在我的 link 函数中。删除一个类似乎更合乎逻辑，因为我的意图是让它成为异常(exception)而不是规则。

<div ng-repeat="object in objects"
     class="firstTagClass"
     ng-if="$index < 4 && object.id !== me.id"
     position="{{index}}"
     block-style>
  {{object.id}}
</div>

JS

blockStyle 指令的详细信息:

restrict: 'A',
link: function(scope, el, attrs){
  var objects = scope.objects;
  var me = scope.me;
  var userCount = Object.keys(objects).length;
  var position = parseInt(attrs.position);

  //assign hasMe attribute for objects collection with me object
  if(objects){
    for(var prop in objects){
      if(objects[prop].id === me.id){
        objects.hasMe = true;
      }
    }
  }

  //handle particular case of 1 object displayed
  if(userCount < 2 || userCount < 3 && objects.hasMe === true){
    el.removeClass('firstTagClass');
  }else if(position > 0){
    el.removeClass('firstTagClass');
  }  
} // end of link function