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

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

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

我目前正在打印出克＆amp;每种食物中第一个单位的标题如下：

<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可以非常轻松地处理选项和选定的选项。你应该停止考虑索引或价值。使用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数组。
unit表示每当用户选择一个项目时，我们在ng-model中放入的是整个as unit.title对象本身。 unit告诉angular使用单位的标题作为选项的显示。

最终做的是每当用户选择其中一个选项时，整个selectedUnit对象将存储在ng-model变量中（在本例中为<div class="unit">Unit is: {{ selectedUnit.title }}</div> <div class="max">Max is: {{ selectedUnit.max }}</div> <div class="grams">Grams is: {{ selectedUnit.gram }} </div>）。这使得将其绑定到其他地方非常容易。例如，您可以这样做：

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

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

例如，我经常看到新手做类似

的事情

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

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

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

然后让点击处理程序取名：

{{1}}

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

她是你榜样的傻瓜：

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

Answer 2

您可以使用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>

这应该可行;但尚未尝试过！

使用AngularJS中的select输入选择不同的子JSON元素

2 个答案: