Условный ngRepeat на основе выпадающего

Question

Условный ngRepeat на основе выпадающего

0

Я хотел бы отобразить список, основанный на том, какой элемент выбран в раскрывающемся списке.

Когда я использую приведенный ниже код, я получаю эту ошибку: TypeError: Cannot read property 'type' of undefined

Любые предложения о том, как это сделать правильно?

HTML:

<select class="form-control" ng-model="editProject.project.type" 
ng-options="project as project.type for project in editProject.options track by project.type">
</select>

<ul class="list-group">
  <li class="list-group-item" ng-repeat="benefit in editProject.foods()">{{snack}}</li>
</ul>

контроллер:

.controller('EditProjectCtrl', function () {

  var editProject = this;

 editProject.options = [
    {'type': 'Fruits'},
    {'type': 'Vegetables'},
    {'type': 'Desserts'}   
];

 editProject.snacks = function() {

  if(editProject.project.type == 'Fruits') {return [
    'Grapes',
    'Oranges',
    'Apples',
  ]}

  if(editProject.project.type == 'Vegetables') {return [
    'Broccoli',
    'Spinache',
    'Kale',
  ]}

  else {return [
  'Cookies',
  'Cake', 
  'Pie']}
};

Ken 28 сен. 2015, в 01:18

Источник

0

ng-model списка выбора установлена на editProject.project.type но в контроллере вы читаете editProject.projects.type (обратите внимание на 's').
Michael P. Bazos 27 сен. 2015, в 22:37

Теги:

angularjs

ng-repeat

1 ответ

Ещё вопросы

ng-model списка выбора установлена на editProject.project.type но в контроллере вы читаете editProject.projects.type (обратите внимание на 's').

Michael P. Bazos · Accepted Answer · 2015-09-27T21-25-00.000Z

Вы почти там. Было несоответствие между ng-model элемента select и условиями в контроллере. Я также заменил benefit in editProject.foods() с помощью snack in editProject.snacks():

<select class="form-control" ng-model="editProject.project" ng-options="project as project.type for project in editProject.options track by project.type"></select>
<ul class="list-group">
    <li class="list-group-item" ng-repeat="snack in editProject.snacks()">{{snack}}</li>
</ul>

Поскольку editProject.project не определен до выбора проекта, вы должны инициализировать его в контроллере:

editProject.project = {};

Смотрите скрипку