我可以基于$索引和ng-repeat对象的长度应用css类吗?

I hope this hasn't been answered anywhere else. I am trying to create a rule with ng-class that:

我希望其他地方都没有回答这个问题。我正在尝试用ng类创建一个规则:

displays firstTagClass if the item is $first in the repeater index
如果项目在repeater索引中为$first，则显示firstTagClass
is not displayed when the item is the only item in the repeater
当项目是中继器中唯一的项目时不显示
that doesn't use scope.objects.length (because scope.objects is not an array but an object in this specific case).
不使用scope.objects。(因为长度范围。对象不是数组，而是这个特定情况下的对象。

USE CASE

用例

Can be a great starting point to crop avatar pictures and hold them in the same container.

可以作为剪辑阿凡达的一个很好的起点，把它们放在同一个容器中。

SO FAR...

到目前为止…

I completed the first and third objectives but I am stuck with the second. I tried to add a second condition !$last but it doesn't work.

我完成了第一个和第三个目标，但是我仍然坚持第二个目标。我试着添加第二个条件，$last，但是不行。

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

Is there a way to achieve all of my goals through ng-class or should I build a custom directive?

有没有一种方法可以通过ng-class实现我的所有目标，或者我应该构建一个自定义指令吗?

Thanks in advance for your help.

谢谢你的帮助。

Hadrien

UPDATE

更新

I am adding a Codepen: http://codepen.io/anon/pen/ZYaBjW

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

1 个解决方案

#1

I found an answer making use of a directive. You can check the solution by removing the 3rd object in $scope.objects here: http://codepen.io/anon/pen/LEOopR

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

HTML

HTML

I added the block-style directive and used the class attribute instead of ng-class since I chose to use element.removeClass() in my link function. It seemed more logical to remove a class because my intention was to make it the exception and not the rule.

我添加了块样式指令，并使用了class属性而不是ng-class，因为我选择在链接函数中使用elelement . removeclass()。删除类似乎更符合逻辑，因为我的目的是使它成为异常，而不是规则。

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

The details of the blockStyle directive:

区块样式指示的详情:

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

#1