1

我正在遍历一系列食品并为每个食品打印一个选择。我想从数组的子元素中填充 select 的选项。我正在尝试这样做：

<div ng-controller="MyCtrl">
<div ng-repeat="food in foodlist"> {{food.name}} 
<select ng-options="unit.title as unit in food.unit" ng-model="unit" ng-change="update()"></select>
{{unit.name}}
</div>   
</div>

食物看起来像这样：

{code: 1, name: 'Yoghurt', "unit":[
  {"title":"bottle",
   "gram":"45",
   "max":"100"
   },
   {"title":"cup",
   "gram":"250",
   "max":"12"}
  ]},

这会打印出每种食物的标题，但不会在选择中打印任何内容。

见 JSFiddle

我想我错误地调用了子元素。谁能告诉我如何正确地做到这一点？

4

3 回答 3

2

您的 ng-options 有错误。试试这个：

<select ng-options="unit.title for unit in food.unit" ng-model="unit" ng-change="update()"></select>

在表达式中使用“as”将允许您指定显示为选项文本部分的内容。您仍然需要语句的“for”部分，它是集合 food.unit 中每个项目的变量 crated。

希望这可以帮助！

于 2013-11-01T16:01:14.040 回答
1

像这样使用ng-options：ng-options="unit.title as unit.title for unit in food.unit"

您也可以使用它ng-init来避免开始时出现空组合：

HTML

<div ng-controller="MyCtrl">
    <div ng-repeat="food in foodlist">{{food.name}}
        <select
        ng-options="unit.title as unit.title for unit in food.unit"            
        ng-model="unit"            
        ng-change="update()"
        ng-init="unit = food.unit[0].title"
        ></select>{{unit.name}}</div>
</div>

演示Fiddle

于 2013-11-01T16:17:39.703 回答
0

我以这种方式填充了我的下拉菜单。

<html>
<select ng-model="myModel" ng-options="direction for direction in directionOptions"></select>

<controller>
var Directions = ['UP', 'DOWN', 'LEFT', 'RIGHT'];
$scope.directionOptions= Directions;

您可以通过编辑 ng-options 中的第一个“方向”来指定希望在下拉菜单中显示的值。

于 2013-11-01T16:42:19.810 回答