2014-07-24 1 views
2

У меня есть JSON, определенный в моей компетенции какangularjs нг-варианты выбрать из вложенной 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> 

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

Любые идеи оцениваются.

+0

люди! = People, также не действует в формате JSON. Котировки «Имя» и «ID». Вот ваш действительный JSON: http://pastie.org/9418572 – Ronnie

+0

Спасибо, отредактировал его. Это была просто ошибка опечатки. люди в Люди означают для каждого объекта в сфере Люди. – Pals

+0

У вас все еще есть дополнительные ',' после '' '' – Ronnie

ответ

0

Я работаю над этим, чтобы быть лучше, но что-то вроде этого? 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

+0

Нет. Я хочу, чтобы все параметры были в одном раскрывающемся списке. – Pals

+0

Я буду продолжать играть – Owen

+0

Ценить. Благодарю. – Pals

0

Хорошо, я думаю, вам придется выполнить некоторую предварительную обработку в массиве 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/

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

+0

Кажется, это круглый путь. Разве мы не можем обойтись без предварительной обработки? – Pals

+0

Это то, с чем я столкнулся. Поскольку список опций поступает из нескольких массивов в массивах внутри массивов, которые вы пытаетесь сделать угловой, очистите json для вас. Лучшим способом было бы иметь все опции, определенные в одном объекте/массиве, которые могут вызвать углы или что-то еще. Затем просто назначьте выбор, сделанный для отдельного people.choice.dinner. – Owen

+0

Я согласен ... упростить работу с JSON. – Ronnie

0

Я пытался сделать то же самое и нашел другое решение, чтобы просто отобразить имена с помощью 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> 

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

  • Рыба
  • Чичен
  • Говядина
  • и т.д.