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

我希望这没有在其他地方回答。我试图创建ng-class一个规则：

显示firstTagClass如果该项目是在转发指数没有显示
$first当产品在转发
那并不是唯一的项目” t使用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全部实现我的目标还是应该建立一个自定义指令？

在此先感谢您的帮助。

Hadrien

UPDATE

我增加了Codepen：http://codepen.io/anon/pen/ZYaBjW

来源

2015-02-06 Hadri

我找到了答案，利用一个指令。您可以通过删除在$第三对象检查解决方案scope.objects这里：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>

的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

来源

2015-02-09 18:04:33 Hadri

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

回答

相关问题