我不是要为ng-repeat的最后一个元素添加不同的类。
我有要显示的数据:
$scope.sizes = [{name:XS,available:true},{name:S,available:true},{name:M,available:false},{name:L,available:true},{name:XL,available:false}];
我想显示包含true的数据范围,即将上面显示为“XS→L”(注意缺少M选项)。
我想出的最好的是使用ng-repeat:
<span ng-repeat="size in sizes track by $index"
ng-init="sizeIndex = $index"
ng-show="size.available == true && (sizeIndex == 0 || sizeIndex == (sizes.length -1))">
{{size.short}}<span ng-show="sizeIndex ==0"> → </span>
</span>
正如预期的那样,因为大小XL可用== false而失败,如果大小XS不可用,它将无效。
是否存在我没有想到的显示逻辑的排列?或者是否有一种“正确”的方法来测试一个元素是否是列表中的最后一个(或第一个)显示?
答案 0 :(得分:1)
执行此操作的最佳方法是在尝试显示控制器之前计算结果:
$scope.sizes = [
{name: "XS", available: true},
{name: "S", available: true},
{name: "M", available: false},
{name: "L", available: true},
{name: "XL", available: false}
];
DisplayRange();
function DisplayRange () {
var BeginSize = null, EndSize = null;
for (var i=0; i < $scope.sizes.length; i++) {
if ($scope.sizes[i].available === true && BeginSize == null) {
BeginSize = $scope.sizes[i].name;
}
if ($scope.sizes[i].available === true) {
EndSize = $scope.sizes[i].name;
}
}
$scope.FormattedSizes = BeginSize + " → " + EndSize;
}
这样做是扫描$scope.sizes
数组中的每个项目。当找到第一个可用项时,它会将该名称分配给BeginSize
。每次看到可用的项目时,它都会将该名称分配给EndSize
。我们可以草率EndSize
,因为最终循环将到达最后一个可用项并将其分配给EndSize
,这将使其正确。
在您的HTML中,请像这样引用它:
<span>{{ FormattedSizes }}</span>
答案 1 :(得分:1)
如果filter
available
$first
,那么简单的$last
n <li class="animate-repeat" ng-repeat="size in sizes | filter: {available:true}">
<div ng-show="$first">{{size.name}}</div>
<div ng-show="$last">{{size.name}}</div>
</li>
就可以了
count()
demo https://plnkr.co/edit/QHIKrUOudSYpczWuVdCe?p=preview这是angular doc示例的一个分支