{[{ingredient.entry.ful-6ren">
gpt4 book ai didi

html - 如何停止在最后显示的元素上重复 ng-repeat?

转载 作者:太空宇宙 更新时间:2023-11-04 08:14:03 24 4
gpt4 key购买 nike

所以我有一个由 ng-if 条件化的 ng-repeat。

这就是div

<div class="fav-prod-customised>
<p ng-repeat="ingredient in product.options"
ng-if="ingredient.default_quantity == 0 &&
ingredient.entry.quantity > 0">
{[{ingredient.entry.full_name}]}
<span ng-if="!$last">,</span>
</p> .
</div>`

在我想要逗号的每一种成分之后,直到我不想要逗号的最后一种成分。“$last”属性无效,因为最后显示的元素不是数组中的最后一项。

我该如何解决?

最佳答案

ng-repeat 中的 ng-if 替换为自定义过滤器:

创建一个 custom filter :

app.filter("myFilter", function() {
return function (list) {
return list.filter(function(item) {
return item.default_quantity == 0 &&
item.entry.quantity > 0;
});
};
})

使用那个过滤器而不是使用 ng-if指令:

   <p ng-repeat="ingredient in product.options | myFilter">
{{ingredient.entry.full_name}} {{$last}}
<span ng-hide="$last">,</span>
</p> .

这种技术更有效,因为它避免了为每个 ng-if 添加观察者和子作用域。还有 $lastng-repeat 的其他特殊属性指令将按预期工作。

The DEMO

angular.module("app",[])
.filter("myFilter", function() {
return function (list) {
return list.filter(function(item) {
return item.default_quantity == 0 &&
item.entry.quantity > 0;
});
};
})

.controller("ctrl", function($scope) {
var vm=$scope;
vm.product = { options: [
{ default_quantity: 0,
entry: { quantity: 4, full_name: "fullname0"}
},
{ default_quantity: 0,
entry: { quantity: 4, full_name: "fullname1"}
},
{ default_quantity: 1,
entry: { quantity: 4, full_name: "fullname2"}
},
]
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
GOOD
<p ng-repeat="ingredient in product.options | myFilter">
{{ingredient.entry.full_name}} {{$last}}
<span ng-hide="$last">,</span>
</p> .
<hr>BAD
<p ng-repeat="ingredient in product.options"
ng-if="ingredient.default_quantity == 0 &&
ingredient.entry.quantity > 0">
{{ingredient.entry.full_name}} {{$last}}
<span ng-hide="$last">,</span>
</p> .
</body>

关于html - 如何停止在最后显示的元素上重复 ng-repeat?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46038248/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com