javascript - 在 AngularJS 中使用选择输入选择不同的子 JSON 元素

Question

我通过对每个类别进行 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>

我怎样才能使它动态化，以便打印出当前所选单位的最大值和克数？

Here's my Plunkr.

Answer 1

Angular 使处理选项和选定选项变得非常容易。您应该停止考虑索引或值(value)。使用 angular 你可以绑定(bind)整个对象，所以不需要查找它。例如，您可以为您的选择执行以下操作:

<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 对象本身。 as unit.title 告诉 Angular 使用单位的标题作为选项的显示。

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

<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);
};

我知道我偏离了您最初的问题。但希望这是有道理的，并帮助您使用“Angular 方式”更简单地编写东西

她是你的榜样的代言人:

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