基于下拉菜单的条件 ngRepeat答案

【问题标题】：Conditional ngRepeat based on dropdown基于下拉菜单的条件 ngRepeat
【发布时间】：2015-09-28 06:52:06
【问题描述】：

我想根据在下拉列表中选择的项目显示一个列表。

当我使用下面的代码时，我收到了这个错误： 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']}
};

【问题讨论】：

ng-model 的选择列表设置为editProject.project.type，但在控制器中您正在阅读editProject.projects.type（注意's'）。

标签： angularjs ng-repeat

【解决方案1】：

你快到了。选择元素的ng-model 与控制器中的条件不匹配。我还用snack in editProject.snacks()替换了benefit in editProject.foods()：

<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 = {};

见fiddle

【讨论】：