Question

我有一个对象数组。我有三个属性attorneyId, attorneyName and attorneyList。 attorneyList数组应该是下拉列表。如果是attorneyId = attorneyName = null那么下拉列表只会显示Choose attorney。如果attorneyId != null和attorneyName != null，下拉列表应显示attorneyId和attorneyName中的值。

为此，我正在准备一个对象selectedAttorney = {id:list.attorneyId, name:list.attorneyName}并将其传递给select ng-model。当我更改下拉列表中的值时，我会在selectedAttorney中获得正确的值。但是，如果attorneyId和attorneyName存在某些值，则下拉列表不会预先填充该值。

HTML：

<div ng-repeat = 'list in List'>
  <div class="width-200" ng-init="selectedAttorney = {id:list.attorneyId, name:list.attorneyName}">
    {{selectedAttorney}}
    <select ng-model="selectedAttorney" ng-options="attorney.name for attorney in list.attorneyList">
      <option value="">-- choose attorney --</option>
    </select>
  </div>
</div>

JS

$scope.List = [ {
  "attorneyId": "3",
  "attorneyName": "Robert",
  "attorneyList": [
    { "id": 1, "name": "sue" },
    { "id": 2, "name": "anthony" },
    { "id": 3, "name": "Robert" },
    { "id": 4, "name": "George" },
    { "id": 5, "name": "Bruce" }
  ]
},
{
  "attorneyId": null,
  "attorneyName": null,
  "attorneyList": [
    { "id": 1, "name": "sue" },
    { "id": 2, "name": "anthony" },
    { "id": 3, "name": "Robert" },
    { "id": 4, "name": "George" },
    { "id": 5, "name": "Bruce" }
  ]
}
];

以下是plunker链接。

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

提前致谢。

Answer 1

虽然你的方法是正确的，但我更喜欢以这种方式编写我的选择框。

<select ng-model="selectedAttorney">
        <option 
           ng-repeat="attorney in list.attorneyList"
           title="{{attorney.name}}"
           ng-selected="{{attorney.id == selectedAttorney.id}}"
           value="{{attorney}}">{{attorney.name}}
       </option>
</select>

这是更新的工作演示：http://plnkr.co/edit/vCNOAPWlR6Mj1kFOgCKT?p=preview

预先在Angular JS中填充ng-repeat中的下拉值

1 个答案: