ng-repeat内部的ng-repeat不起作用

时间:2022-12-12 18:59:37

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>