javascript - 如何在angulars js上为ng-repeat选项获取数组中的子值？

Question

使用 ng-repeat 但无法获得选项值！

请帮忙！html:

<ul ng-controller="app">
    <li ng-repeat="mainlist in mainlists">
    <p>{{mainlist.name}}</p>
    <select ng-options="mainlist.list for mainlist.list in mainlists.list">
      <option value="">{{mainlist.list.name}}</option>
    </select>
  </li>
</ul>

这个演示

js：只获取 {{mainlists.name}}不获取{{mainlists.list.name}}

function app($scope) {  
  $scope.mainlists = [
    {
      "name":"main001",
      "list":[
        {
          "no":"1",
          "name":"sub1"
        },{
          "no":"2",
          "name":"sub2"
        }]
     },
   {
      "name":"main002",
      "list":[
        {
          "no":"2-1",
          "name":"sub1"
        },{
          "no":"2-2",
          "name":"sub2"
        }]
     }]
 };

这个演示

Answer 1

ngOptions指令需要ngModel在选择元素上定义指令。

这不是记录在案的陷阱，但可以从源代码中看到

因此，如果您添加ngModel它们，您的选择将起作用：

<select 
  ng-model="mainlist.value" 
  ng-options="item as item.name for item in mainlists.list"
>
</select>

或者，如果您不打算将选择与模型连接起来（非常不寻常的情况），那么您可能希望ng-repeat与您的选择选项一起使用：

<select>
  <option ng-repeat="item in mainlist.list">{{item.name}}</option>
</select>