I am trying show options from array of array inside a select drop down but it is not showing up. Can someone tell me what I am doing wrong here ? https://plnkr.co/edit/HMYbTNzkqkbAGP7PLWWB?p=preview
HTML :
<div ng-controller="MainCtrl">
<table>
<tr ng-repeat="r in rows track by $index">
<td>
<select ng-model="r.name"
ng-options="option.name as option.name for option
in availableOptions">
<option value="">Select Value</option>
</select>
</td>
<td>
<select ng-model="r.value"
ng-options="opt.name for opt in option.value for option in availableOptions | filter:{name: r.name}">
<option value="">Select Value</option>
</select>
</td>
<td>
<input type="button" ng-click="addRow()" value="Add">
</td>
<td>
<input type="button" ng-click="deleteRow($index)"
value="Delete">
</td>
</tr>
</table>
<div>
{{rows}}
</div>
JS :
var bb = [];
bb.push({name:"CCCC"});
bb.push({name:"AAAA"});
bb.push({name:"DDDD"});
var aa = [];
aa.push({name:"CCCC"});
aa.push({name:"AAAA"});
aa.push({name:"BBBB"});
var cc = [];
cc.push({name:"BBBB"});
cc.push({name:"AAAA"});
cc.push({name:"DDDD"});
var dd = [];
dd.push({name:"CCCC"});
dd.push({name:"AAAA"});
dd.push({name:"CCCC"});
$scope.availableOptions = [
{ name: 'TestA',
value : aa
},
{ name: 'TestB',
value : bb
},
{ name: 'TestC',
value : cc
},
{ name: 'TestD',
value : dd
},
{ name: 'TestE',
value : []
}
];
How do I specify the ng-options for value which is an array filtered based on name: 'TestE' or something ?
The are two problem sin your code :
1# you did not assign value to all aa,bb,cc,dd they were empty
2# Filter would return you array so you need to use its 1st element like this
<select ng-model="r.value"
ng-options="option.name as option.name for option
in (availableOptions | filter:{name: r.name})[0].value">
<option value="">Select Value</option>
</select>
See this https://plnkr.co/edit/cQTISC1SPucCCRQQ8ca7?p=preview