所以我有一个以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>`
在我想要一个逗号的每种成分之后,直到最后一个我不想要逗号的成分。 &#39; $最后&#39;属性不起作用,因为最后显示的项目不是数组中的最后一项。
我该如何解决?
答案 0 :(得分:1)
ng-if
中的ng-repeat
: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
添加观察者和子范围。同样$last
和ng-repeat指令的其他特殊属性也将按预期工作。
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"}
},
]
};
})
&#13;
<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>
&#13;
答案 1 :(得分:0)
使用三元组{{$last ? '' : ', '}}
:
<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}]}
{{$last ? '' : '<span>, </span>'}}
</p>
</div>