0

I am displaying the ng-repeat content in two columns.

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:

        <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

    $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).

||||||
  • Try removing the "orderBy" filter just to isolate if the cause is from the "greaterThan()" filter. Can we see your "greaterThan()" code or can you setup a sample fiddle? – phteven May 5 '16 at 1:25
  • My greaterThan code has been added. I've removed the "orderBy" filter and still no content appears. – Ycon May 5 '16 at 1:31
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.

I.E. With your delegate comparing index.prop > val, what you're really doing is comparing 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.

<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>
||||||
  • This is not displaying the data in two columns as I need it to be AND the orderBy has no affect – Ycon May 5 '16 at 4:20
  • I'm merely demonstrating the error in your filter. I don't know what your data looks like and what you're trying to achieve. You will have to figure the rest for yourself. – Kyle May 5 '16 at 9:11
  • The data looks like this {image:"green", order:2},{image:"blue", order:3},{image:"yellow", order:1} – Ycon May 6 '16 at 3:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.