I am displaying the ng-repeat content in two columns.
我在两列中显示ng-repeat内容。
Using this code works fine:
使用此代码工作正常:
<div class=storerow ng-repeat="store in stores track by $index" ng-if="$index%2==0">
<div ng-repeat="i in [$index,$index+1]" ng-if="stores[i]!=null" class="ngrepeatstore">
<div class="image-container" style="background-image: url({{stores[i].image}})" ng-click="tileClicked({{stores[i].id}})">
</div>
</div>
However, when I add a filter- it breaks the NG repeat and no content appears:
但是,当我添加一个过滤器时,它会破坏NG重复并且不会出现任何内容:
<div class=storerow ng-repeat="store in stores track by $index" ng-if="$index%2==0">
<div ng-repeat="i in [$index,$index+1] | filter: greaterThan('order', 0) | orderBy:'order'" ng-if="stores[i]!=null" class="ngrepeatstore">
<div class="image-container" style="background-image: url({{stores[i].image}})" ng-click="tileClicked({{stores[i].id}})">
</div>
</div>
the .js for greaterThan
更大的.js
$scope.greaterThan = function(prop, val){
return function(item){
return item[prop] > val;
}}
I tried adding the filter to the first ng-repeat- however that doesn't work as it just applies the filter to the overall content (ie if just one item is greatThan 0, it shows all items- not just the ones greater than 0).
我尝试将过滤器添加到第一个ng-repeat-然而这不起作用,因为它只是将过滤器应用于整体内容(即,如果只有一个项目是伟大的0,它显示所有项目 - 不仅仅是大于0的项目)。
1 个解决方案
#1
0
This is because you're actually telling Angular to filter the property order
on [$index, $index + 1]
, an array of two integers, which makes no sense.
这是因为你实际上是在告诉Angular过滤[$ index,$ index + 1]的属性顺序,这是一个由两个整数组成的数组,这没有任何意义。
I.E. With your delegate comparing index.prop > val
, what you're really doing is comparing index['order'] > someValue
.
I.E.使用你的委托比较index.prop> val,你真正在做的是比较index ['order']> someValue。
This Plunker demonstrates: http://plnkr.co/edit/FkSrmZuuK4B1ToGNgAnq?p=preview You need to move filter:greaterThan(prop, val)
up to the parent ng-repeat
. Only there will your filter work.
这个Plunker演示了:http://plnkr.co/edit/FkSrmZuuK4B1ToGNgAnq?p=preview你需要将filter:greaterThan(prop,val)移动到父ng-repeat。只有您的过滤器才有效。
<div ng-repeat="store in stores | filter:greaterThan2('id', 0) | orderBy:'name'" ng-if="$even">
{{store.name}}
<div ng-repeat="i in [$index, $index+1] | orderBy:angular.identity:true" ng-if="stores[i] !== null">
<strong>store.id</strong> {{i}}
</div>
</div>
#1
0
This is because you're actually telling Angular to filter the property order
on [$index, $index + 1]
, an array of two integers, which makes no sense.
这是因为你实际上是在告诉Angular过滤[$ index,$ index + 1]的属性顺序,这是一个由两个整数组成的数组,这没有任何意义。
I.E. With your delegate comparing index.prop > val
, what you're really doing is comparing index['order'] > someValue
.
I.E.使用你的委托比较index.prop> val,你真正在做的是比较index ['order']> someValue。
This Plunker demonstrates: http://plnkr.co/edit/FkSrmZuuK4B1ToGNgAnq?p=preview You need to move filter:greaterThan(prop, val)
up to the parent ng-repeat
. Only there will your filter work.
这个Plunker演示了:http://plnkr.co/edit/FkSrmZuuK4B1ToGNgAnq?p=preview你需要将filter:greaterThan(prop,val)移动到父ng-repeat。只有您的过滤器才有效。
<div ng-repeat="store in stores | filter:greaterThan2('id', 0) | orderBy:'name'" ng-if="$even">
{{store.name}}
<div ng-repeat="i in [$index, $index+1] | orderBy:angular.identity:true" ng-if="stores[i] !== null">
<strong>store.id</strong> {{i}}
</div>
</div>