如何获取数组中的子值，以便在angulars上获得ng-重复选项？

Question

使用ng-重复，但不能得到选项值！

救命啊！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 指令要求在select元素.上定义 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>