ng-repeat on array based on length of second array

Question

I am trying to iterate over an array using ng-repeat to display in a list. The number of records to display should be equal to the length of a second array.

 <ul>
  <li ng-repeat="item in firstArray"></li>
 </ul>

 var firstArray = ["a","b","c","d","e","f"]
 var secondArray = ["x","y","z"]

The expected result for the above example :

 var output = ["a","b","c"]

Since the length of secondArray is 3, the number of li elements would be 3 with the first three values from firstArray.

Should i use filter? I am using angularjs.

Thanks

maurycy · Accepted Answer · 2016-06-21 09:44:09Z

5

The simplest solution is to use limitTo

<ul>
  <li ng-repeat="item in firstArray | limitTo:secondArray.length">{{item}}</li>
</ul>

http://plnkr.co/edit/LWh1uqNPxTy09u3MP677?p=preview

answered Jun 21, 2016 at 9:44

maurycy

8,4201 gold badge30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohit · Accepted Answer · 2016-06-21 09:44:41Z

1

<ul>
  <li ng-repeat="item in firstArray" ng-if=" $index < secondArray.length "></li>
</ul>

Use the above code, it will work

answered Jun 21, 2016 at 9:44

Rohit

2211 silver badge7 bronze badges

1 Comment

maurycy Over a year ago

That's performance unwise, instead of rendering only required number of elements you will create multiple watchers with ngIf to compare $index and array length in every $digest cycle

Gopal Yadav · Accepted Answer · 2016-06-21 09:51:41Z

1

You can use AngularJs filter limitTo in ng-repeat. Refer to the below example:

At angular application side:

    var app = angular.module('sampleapp', [])
    app.controller('samplecontrol', function ($scope) {
        $scope.firstArray = ["a","b","c","d","e","f"]
        $scope.secondArray = ["x","y","z"]
    });

In your view:

<ul>
    <li ng-repeat="item in firstArray | limitTo:secondArray.length">{{item}}</li>
</ul>

answered Jun 21, 2016 at 9:51

Gopal Yadav

3682 silver badges8 bronze badges

Comments

AsmaG · Accepted Answer · 2016-06-21 09:48:39Z

0

Maybe you should use $index to test if it has to be displayed :

<ul >
     <li ng-repeat="item in firstArray" ng-if="$index < secondArray.length()" > </li>
 </ul>

answered Jun 21, 2016 at 9:48

AsmaG

5074 silver badges18 bronze badges

Comments

remolueoend · Accepted Answer · 2016-06-21 09:55:46Z

0

Just loop over your second array and access the items of the first array using firstArray[$index].

angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
	$scope.firstArray = ["a","b","c","d","e","f"];
    $scope.secondArray = ["x","y","z"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <ul>
            <li ng-repeat="i in secondArray">
                {{firstArray[$index]}}
            </li>
        </ul>
    </div>
</div>

answered Jun 21, 2016 at 9:55

remolueoend

711 silver badge5 bronze badges

1 Comment

maurycy Over a year ago

And on the way access not existing element of first array and produce way to many li that's needed

Collectives™ on Stack Overflow

ng-repeat on array based on length of second array

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related