angularjs ng-options select from nested json array

问题

I have a json defined in my scope like

   $scope.People = [  
    {  
          "firstName":"John",
          "lastName":"Doe",
          "Choices":[  
             {  
                "Name":"Dinner",
                "Options":[  
                   {  
                      "Name":"Fish",
                      "ID":1
                   },
                   {  
                      "Name":"Chicken",
                      "ID":2
                   },
                   {  
                      "Name":"Beef",
                      "ID":3
                   }
                ]
             },
             {  
                "Name":"Lunch",
                "Options":[  
                   {  
                      "Name":"Macaroni",
                      "ID":1
                   },
                   {  
                      "Name":"PB&J",
                      "ID":2
                   },
                   {  
                      "Name":"Fish",
                      "ID":3
                   }
                ]
             }
          ]
       },
       {  
          "firstName":"Jane",
          "lastName":"Doe"
       }
    ];

Wanted to list all the choices options name (without duplicates) in a single drop down box using angularjs.

The drop options will have the values Fish, Chicken, Beef, Macaroni, PB&J

<div ng-app="myApp" ng-controller="SomeController">
     <select ng-model="people.Choices.Name"                 
           ng-options="people.Choices.Name for people in People"></select>
</div>

But this is not working.

Any insights is appreciated.

回答1:

<select>
<option ng-repeat-start="p in people" ng-bind="p.firstName"></option>
<option ng-repeat-end ng-repeat="choice in p.choices" ng-bind="choice.name"></option>
</select>

http://plnkr.co/edit/2vj4PK?p=preview

回答2:

I'm working this to be better, but something like this? Plnkr It's a start!

 <div ng-repeat="people in People">
     <div ng-repeat="choice in people.Choices">
         <select ng-model="choice.SelectedOption"                 
           ng-options="option.Name for option in choice.Options"></select>
    </div>
 </div>

Revision 2. Now with selections! Pnkr 2

回答3:

Ok, I think you'll have to do some preprocessing on the JSON array and filter it that way. This was the easiest method

HTML

<body ng-app="TestApp">
    <div ng-controller="TestController">
        <select ng-model="blah"
            ng-options="opt for opt in options">                
        </select>        
    </div>
</body>

var app = angular.module('TestApp',[]);

app.controller('TestController', function($scope)
{
    $scope.options = [];
    $scope.people = [
      {
        "firstName": "John",
        "lastName": "Doe",
        "choices": [
          {
            "name": "Dinner",
            "options": [
              {
                "name": "Fish",
                "id": 1
              },
              {
                "name": "Chicken",
                "id": 2
              },
              {
                "name": "Beef",
                "id": 3
              }
            ],
            "selectedOption": {
              "name": "Chicken",
              "id": 2
            }
          },
          {
            "name": "Lunch",
            "options": [
              {
                "name": "Macaroni",
                "id": 1
              },
              {
                "name": "PB&J",
                "id": 2
              },
              {
                "name": "Fish",
                "id": 3
              }
            ],
            "selectedOption": ""
          }
        ]
      },
      {
        "firstName": "Jane",
        "lastName": "Doe"
      }
    ];
    for (var a = 0; a < $scope.people.length; a++)
    {
        if ($scope.people[a].choices != undefined)
        {
            for (var b = 0; b < $scope.people[a].choices.length; b++)
            {
                for (var c = 0; c < $scope.people[a].choices[b].options.length; c++)
                {
                    var target = $scope.people[a].choices[b].options[c].name;
                    if ($scope.options.indexOf(target) == -1) $scope.options.push(target);
                }
            }           
        }
    }
});

http://jsfiddle.net/HX6T3/

I also modified some of the uppercase to all lower case. You can change it back if you want.

回答4:

I was trying to do the same thing and found another solution to just display the Names by using ng-if="false" or style="display: none" and ng-repeat-start/end. Based on @user730009's answer.

<div ng-repeat="people in People">
<select>
    <option ng-repeat-start="choice in people.Choices" ng-if="false"></option>
    <option ng-repeat-end ng-repeat="option in choice.Options" value="{{ option.name }}">{{ option.name }}</option>
</select>
</div>

This gives us a select box with the following options.

Fish
Chichen
Beef
etc

来源：https://stackoverflow.com/questions/24944582/angularjs-ng-options-select-from-nested-json-array

标签

angularjs

ng-options