基于下拉列表的条件 ngRepeat

Question

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

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

Answer 1

你快到了。 select 元素的 ng-model 与控制器中的条件不匹配。我还将 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在你select一个项目之前没有定义，你必须在控制器中初始化它：

editProject.project = {};

见fiddle

基于下拉列表的条件 ngRepeat

Conditional ngRepeat based on dropdown

angularjs

ng-repeat