Tuesday, 4 July 2017

angularjs ng-repeat get right $index after filter applied for multicolumns


The normal way of using ng-repeat is here:

https://docs.angularjs.org/api/ng/directive/ngRepeat

If you do ng-repeat with multi columns, you can do this way:

You use ng-if and $index to manage to show 2 items on each row.

https://plnkr.co/edit/DS0GHlpxSkrU0laBe3bA?p=preview


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-repeat-production</title>
  <link href="animations.css" rel="stylesheet" type="text/css">
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-animate.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="ngRepeat">
  <div ng-controller="repeatController">
  I have {{friends.length}} friends. They are:
  <input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results" ng-if="$index % 2 == 0">
      [{{$index + 1}}] {{friends[$index].name}} who is {{friends[$index].age}} years old,
      
      [{{$index + 1 + 1}}] {{friends[$index + 1].name}} who is {{friends[$index + 1].age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length === 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>
</body>
</html>

<!-- 
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

However the filter on above code does work.

As i mentioned in the title of the post, how to get right $index after filter applied.

First, there is something wrong in the question. $index is actually right, "dataList" is wrong. "dataList" still have the unfiltered data in it. so that is why no matter who search criteria you applied to filters the list will always show first couple of items.

to fix this. you will need to use :

filter:q as results

then change friends[$index + 1]. to results[$index + 1].


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-repeat-production</title>
  <link href="animations.css" rel="stylesheet" type="text/css">
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-animate.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="ngRepeat">
  <div ng-controller="repeatController">
  I have {{friends.length}} friends. They are:
  <input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results" ng-if="$index % 2 == 0">
      [{{$index + 1}}] {{results[$index].name}} who is {{results[$index].age}} years old,
      
      [{{$index + 1 + 1}}] {{results[$index + 1].name}} who is {{results[$index + 1].age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length === 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>
</body>
</html>

<!-- 
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

1 comment: