Javascript 我可以基于$index和ng repeat对象的长度应用css类吗？

我希望这个问题在其他任何地方都没有得到回答。我正在尝试使用

ng类

创建一个规则：

• 如果项目在中继器索引中为

  $first

  ，则显示

  firstTagClass

• 当项目是中继器中的唯一项目时，不显示
• 它不使用

  scope.objects.length

  （因为scope.objects在这种特定情况下不是数组而是对象）

用例

可以作为裁剪化身图片并将其保存在同一容器中的一个很好的起点

到目前为止……

我完成了第一个和第三个目标，但第二个目标却让我束手无策。我试图添加第二个条件

$最后一个

，但它不起作用

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

有没有办法通过

ng class

实现我的所有目标，或者我应该构建一个自定义指令

提前感谢你的帮助

哈德里安

更新

---

我正在添加一个代码笔：

我找到了一个使用指令的答案。您可以在此处删除$scope.objects中的第三个对象来检查解决方案：

HTML

我添加了

block style

指令，并使用

class

属性而不是

ng class

，因为我选择在我的

link

函数中使用

element.removeClass（）

。删除一个类似乎更符合逻辑，因为我的意图是将其作为例外而不是规则

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

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