angularjs ng-options выбирают из вложенного массива json

У меня есть json, определенный в моей области, например

   $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"
       }
    ];

Хотел перечислить все имена вариантов выбора (без дубликатов) в одном раскрывающемся списке, используя angularjs.

Варианты выпадения будут иметь значения «Рыба», «Курица», «Говядина», «Макароны», «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>

Но это не работает.

Любые идеи приветствуются.


angularjs ng-options
person Mydeveloperpal    schedule 24.07.2014    source источник
comment
люди != Люди, также недействительный JSON. Name и ID нужны кавычки. Вот ваш действительный JSON: pastie.org/9418572   -  person Ronnie    schedule 25.07.2014
comment
Спасибо отредактировал. Это была просто опечатка. People in People означает для каждой сущности в области People.   -  person Mydeveloperpal    schedule 25.07.2014
comment
У вас все еще есть лишний , после ]   -  person Ronnie    schedule 25.07.2014
comment
Скопировал ваш JSON. Спасибо.   -  person Mydeveloperpal    schedule 25.07.2014
comment
мкэй, я работаю над скрипкой   -  person Ronnie    schedule 25.07.2014
comment
какой элемент вы пытаетесь отобразить в выборе?   -  person Ronnie    schedule 25.07.2014
comment
Я пытаюсь отобразить все варианты во всех вариантах без дубликатов. Как рыба, курица, говядина, макароны, бутерброды и варенье   -  person Mydeveloperpal    schedule 25.07.2014
comment
так есть ли <select> для каждого человека?   -  person Ronnie    schedule 25.07.2014
comment
Неа. Это совокупный вариант всех лиц.   -  person Mydeveloperpal    schedule 25.07.2014

Ответы (4)


arrow_upward
4
arrow_downward 

<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

person user730009    schedule 14.03.2016

arrow_upward
0
arrow_downward

Я работаю над этим, чтобы стать лучше, но что-то вроде этого? Plnkr Это начало!

 <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>

Ревизия 2. Теперь с подборками! Pnkr 2

person Owen    schedule 24.07.2014
comment
Неа. Я хочу, чтобы все параметры были в одном раскрывающемся списке. - person Mydeveloperpal; 25.07.2014

arrow_upward
0
arrow_downward

Хорошо, я думаю, вам придется выполнить некоторую предварительную обработку массива JSON и отфильтровать его таким образом. Это был самый простой способ

HTML

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

JS

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/

Я также изменил некоторые прописные буквы на все строчные. Вы можете изменить его обратно, если хотите.

person Ronnie    schedule 24.07.2014
comment
Кажется, это круговой путь. Неужели нельзя обойтись без предварительной обработки? - person Mydeveloperpal; 25.07.2014
comment
Это то, с чем я также столкнулся. Поскольку список опций исходит из нескольких массивов внутри массивов внутри массивов, с которыми вы сталкиваетесь, пытаясь заставить angular очистить json для вас. Лучшим способом было бы определить все параметры в одном объекте/массиве, из которого может вызывать angular или что-то еще. Затем просто назначьте сделанный выбор отдельным людям.выбор.ужин. - person Owen; 25.07.2014

arrow_upward
0
arrow_downward

Я пытался сделать то же самое и нашел другое решение, просто отображающее имена с помощью ng-if="false" или style="display: none" и ng-repeat-start/end. На основе ответа @ user730009.

<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>

Это дает нам поле выбора со следующими параметрами.

  • Рыбы
  • Чичен
  • Говядина
  • так далее
person A Star    schedule 27.09.2017