Javascript 将子元素打印为AngularJS select的ng选项_Javascript_Angularjs

Javascript 将子元素打印为AngularJS select的ng选项

javascript angularjs

Javascript 将子元素打印为AngularJS select的ng选项,javascript,angularjs,Javascript,Angularjs,我正在遍历一系列食物，并为每一种食物打印一个选择。我想填充数组的select from子元素的选项。我试着这样做： <div ng-controller="MyCtrl"> <div ng-repeat="food in foodlist"> {{food.name}} <select ng-options="unit.title as unit in food.unit" ng-model="

我正在遍历一系列食物，并为每一种食物打印一个选择。我想填充数组的select from子元素的选项。我试着这样做：

<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"}
  ]},

这会打印出每种食物的名称，但不会打印到选择的食物中

我猜我对子元素的调用是错误的。有人能告诉我如何正确执行此操作吗？

您的ng选项中有一个错误。试试这个：

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

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

希望这有帮助

使用

ng选项

如：

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>


{{food.name}
{{unit.name}

演示

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

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

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


变量方向=[‘向上’、‘向下’、‘向左’、‘向右’]；
$scope.directionOptions=方向；

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

这非常有帮助，并使我免于数小时来一直困扰我的事情。非常感谢。