how to use ng-options for nested array?

Question

I am using angular chosen for listing the options.but how to use ng-options for nested array?

<select chosen
option="countries"
 ng-model="data"
  ng-options="??">
</select>

this is my array.

 $scope.data=  [
  {
"Name": "Cat1",
"CategoryID": "1",
"actions": [
  {
    "ActionName": "action1",
   },
  {
    "ActionName": "action2",

  }
]
},
{
"Name": "cat 2",

"actions": [
  {
    "ActionName": "action3",
   },
  {
    "ActionName": "action4",

  }
]
}
  {
"Name": "cat 3",
"actions": [
  {
    "ActionName": "action5",
   },
  {
    "ActionName": "actions 5",

  }
 ]
 }

 ]

I want to list the option group by category name lie this
cat1
action1
action2
cat2
action3
action4
cat3
action5
action6

score 0 · Answer 1 · answered Nov 23 '16 at 00:42

You can parse the "data" and convert it into below format, and use the ng-options shown below.

$scope.countries = [
    { actionName: 'action1', catName: 'cat1' },
    { actionName: 'action2', catName: 'cat1' },
    { actionName: 'action3', catName: 'cat2' },
    { actionName: 'action4', catName: 'cat2' },
    { actionName: 'action5', catName: 'cat3' },
    { actionName: 'action6', catName: 'cat3' }   
];

<select ng-model="country" 
        ng-options="item.actionName group by item.catName for item in countries">
</select>

Find more info on ng-options at this link https://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

score 0 · Answer 2 · answered Nov 23 '16 at 01:01

I have created a new array in javascript and iterated through ng-options, Please check the below link

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

I have created an array and pushed all your values into it, its working fine

      $scope.uniqueOptions = [];

for (var i = 0; i < $scope.data.availableOptions.length; i++) 
   $scope.uniqueOptions.push($scope.data.availableOptions[i].Name);
   //alert($scope.data.availableOptions[i].Name);
    for (var j = 0; j < $scope.data.availableOptions[i].actions.length; j++) 
     // alert($scope.data.availableOptions[i].actions.length);
       //alert($scope.data.availableOptions[i].actions[0].ActionName);
            $scope.uniqueOptions.push($scope.data.availableOptions[i].actions[j].ActionName;

enter code here

how to use ng-options for nested array?

2 Answers2