How can I display values from 2 different arrays in single ng-repeat?
In the above picture it shows the currently displayed content. But I want to display plan names on the left of the ids, something like this:
plan_abc 109426 btn btn
plan_def 109428 btn btn
plan_ghi 109423 btn btn
JSON format is as below:
Code used:
<ul class="ul-plan">
<li class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
{{item}}
<a ng-click="select('one')" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
<a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>
</li>
First try:
<li class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds" "name in plan.planNames">
{{name}} {{item}}
</li>
If you have two collections with the same size, lets say:
$scope.data = { planIds: [1, 2, 3, 4], planNames: ['a', 'b', 'c', 'd'] }
You can use $index
:
<div ng-repeat="id in data.planIds">
{{ id }} - {{ data.planNames[$index] }}
</div>
If you can change the json-structure, then it's more logical to have it on object form:
plans: [{
id: 1098565,
name: 'plan_abc'
},...]
If you can't change the json, and the two arrays always have the same length:
<li class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
{{item}} {{plan.planNames[$index]}}
</li>
$index is a magic value that comes from the ng-repeat directive. As you probably can guess, it keeps track of the where you are in the repeater.