Filter first value of array inside ng-repeat in angularjs

Question

How can i filter josn first element of a row inside ng-repeat using angularjs. i am stuck with this.

My sample code is::

<!DOCTYPE html>
<html>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>
 <div ng-app="myApp" ng-controller="namesCtrl">
  <div>
    <div ng-repeat="x in num| orderBy:'n'">
     <b>{{x.n}}</b>
     <div ng-repeat="y in amt | orderBy:'v'">
       <div ng-if="x.n==y.n">
         <div>{{y.v}}</div>
       </div>
      </div >
    <br />
    </div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.num= [
    {n:'3'},
    {n:'1'},
    {n:'2'},
    ];

$scope.amt= [
    {n:'1',v:'23'},
    {n:'1',v:'24'},
    {n:'1',v:'45'},
    {n:'2',v:'56'},
    {n:'2',v:'67'},
    {n:'2',v:'45'},
    {n:'3',v:'23'},
    {n:'3',v:'67'},
    {n:'3',v:'19'},
    ];

 });
 </script>

 </body>
 </html>

Result is
1
23
24
45

2
45
56
67

3
19
23
67

I am result only. first value.

like:
1
23

2
45

3
19

Please help...

this strategy is really inefficient: it loops through the whole `amt` array for each x.n, only to display a single element. Why don't you find the elements that you want to display in the JS code, just once? — JB Nizet, Mar 11 '16 at 10:05
Please refer this link may be useful to you. [http://stackoverflow.com/questions/32570661/angularjs-multiple-ng-repeats-on-single-row-of-table](http://stackoverflow.com/questions/32570661/angularjs-multiple-ng-repeats-on-single-row-of-table) — viral, Mar 11 '16 at 11:33

score 3 · Accepted Answer · answered Mar 11 '16 at 10:51

3

You should create custom filter function:

$scope.myFilter = function (x) {
  return function (y) {
    if (x.n==y.n) {
      return true;
    } else {
      return false;
    }
  }
};

Use it in inner ng-repeat:

 <div ng-repeat="y in amt | orderBy:'v' | filter:myFilter(x) | limitTo:1">
   <div>{{y.v}}</div>
 </div >

Also, to get top 1 result add standard limitTo filter (limitTo:1), wich first argument sets max return count.

answered Mar 11 '16 at 10:51

Slava N.

596
4
6

This is perfect for me.. and this code solve my multiple problem... thanks Slava – Rakesh Mar 16 '16 at 11:26

score 0 · Answer 2 · answered May 11 '16 at 18:03

(...) < /tr> < /thead> < tbody> < tr ng-repeat="object in objects | SOME_FILTER"> (...) {{object.get("element")}} {{(object.get("element2")).innerElement}} (...) < /tr> < /tbody> < /table> (...)

The 3 dots means that there was some code cut out. "element2" is the one with a JSON inside. "innerElement" is the key. it worked for me, hope would be useful to someone

Thank you for taking the time to answer. Try to format the code properly and maybe add some more explanation — toesslab, May 11 '16 at 18:10

Filter first value of array inside ng-repeat in angularjs

2 Answers2