Question

我希望其他任何地方都没有回答过。我正在尝试使用ng-class创建一条规则：

firstTagClass

会显示$first
不会显示
不使用scope.objects.length（因为scope.objects不是数组，而是此特定情况下的对象）。

使用案例

可以是一个很好的起点来裁剪头像图片并将它们放在同一个容器中。

SO FAR ......

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

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

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

提前感谢您的帮助。

Hadrien

更新

我正在添加Codepen：http://codepen.io/anon/pen/ZYaBjW

Answer 1

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

<强> HTML

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

<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

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

1 个答案: