我希望这个问题没有在其他任何地方得到解答。我正在尝试使用 ng-class
创建一个规则:
- 如果该元素在转发器索引中是
$first
,则显示firstTagClass
- 当该元素是转发器中唯一的元素时不显示
- 不使用
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
实现我的所有目标,或者我应该构建自定义指令?
预先感谢您的帮助。
哈德良
更新
我正在添加一个代码笔:http://codepen.io/anon/pen/ZYaBjW
最佳答案
我找到了一个使用指令的答案。您可以通过在此处删除 $scope.objects 中的第三个对象来检查解决方案:http://codepen.io/anon/pen/LEOopR
HTML
我添加了 block-style
指令并使用了 class
属性而不是 ng-class
因为我选择使用 element .removeClass()
在我的 link
函数中。删除一个类似乎更合乎逻辑,因为我的意图是让它成为异常(exception)而不是规则。
<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
关于javascript - 我可以根据 $index 和 ng-repeat 对象的长度应用 css 类吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28359458/