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

时间:2021-12-07 09:20:33

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

Hadrien

UPDATE

更新

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

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

1 个解决方案

#1


0  

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>

JS

JS

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


0  

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>

JS

JS

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