2

我通过对每个类别进行 API 调用来打印食物类型列表。类别中的食物具有以下 JSON 结构：

{"uid":"56",
 "title":"Nussbrot",
 "code":"X 39 2000000",
 "final_factor":"0",
 "sorting":"0",
 "unit":[
   {"title":"Scheiben",
    "gram":"45",
    "max":"100"
   },
   {"title":"Messerspitzen",
    "gram":"250",
    "max":"12"}
   ]
  }

我正在循环并将值打印到模板中。没问题。我将“单位”值打印到选择框中：

  <option ng-repeat="title in food.unit">{{ title.title }}</option>

我目前正在打印每种食物中第一个单位的克数和标题，如下所示：

<div class="max">Max is: {{ food.unit[0].max }}</div>
<div class="grams">Grams is: {{ food.unit[0].gram }} </div>

如何使这个动态化，以便打印出当前所选单位的最大和克数？

这是我的 Plunkr。

4

2 回答 2

1

Angular 使处理选项和选定的选项变得非常容易。你应该停止考虑索引或价值。使用 angular 您可以绑定整个对象，因此无需查找它。例如，您可以为您的选择执行以下操作：

<select ng-model='selectedUnit' ng-options="unit as unit.title for unit in food.unit"></select>

让我简单解释一下 ng-options 的表达式

  • unit in food.unit意味着我们将遍历food.unit存储每个值的数组unit。

  • unit as unit.title意味着每当用户选择一个项目时，我们在 ng-model 中放入的就是整个unit对象本身。告诉 angular 使用单位的as unit.title标题作为选项的显示。

最终的结果是，每当用户选择其中一个选项时，整个unit对象都将存储在 ng-model 变量中（在本例中为selectedUnit）。这使得将它绑定到其他地方变得非常容易。例如，您可以这样做：

<div class="unit">Unit is: {{ selectedUnit.title }}</div>
<div class="max">Max is: {{ selectedUnit.max }}</div>
<div class="grams">Grams is: {{ selectedUnit.gram }} </div>

在 Angular 中，如果您发现自己在处理索引或 id，然后通过 id 或索引查找内容，那么您通常做错了。使用 Angular 的最大优势之一是处理对象非常容易，您应该真正利用它。

例如，我经常看到新手在做类似的事情

<li ng-repeat="person in persons">{{person.name} <a ng-click="savePerson(person.id)">Save</a></li>

然后在他们的代码中，他们使用 id 从数组中查找人员：

$scope.savePerson = function(id){
   var person = persons[id];
   $http.post('/persons/'+id, person);
};

这种查找对于 Angular 几乎总是不必要的。您几乎总是可以立即通过该人：

<li ng-repeat="person in persons">{{person.name} <a ng-click="savePerson(person)">Save</a></li>

然后让点击处理程序带走这个人：

$scope.savePerson = function(person){
   $http.post('/persons/'+person.id, person);
};

我知道我偏离了你原来的问题。但希望这是有道理的，可以帮助您使用“角度方式”更简单地编写东西

她是你的例子的 plunkr：

http://plnkr.co/edit/lEaLPBZNn0ombUe3GPa9?p=preview

于 2013-11-02T08:24:57.583 回答
0

您可以首先使用 ng-selected 处理所选项目：

http://docs.angularjs.org/api/ng.directive:ngSelected

<select>    
<option ng-repeat="title in food.unit" ng-selected="selectedIndex=$index">{{ title.title }}</option>
</select>


<div class="max">Max is: {{ food.unit[selectedIndex].max }}</div>
<div class="grams">Grams is: {{ food.unit[selectedIndex].gram }} </div>

这应该可以正常工作；）还没有尝试过！

于 2013-11-01T15:16:42.533 回答