Angular ng-option訪問多個屬性

Question

假設我有一個后端調用，該調用返回一個對象（和屬性）列表，並且我使用ng-option將其中一個屬性（名稱）粘貼到下拉列表中，該列表使用ng-model將自身附加到我的模型上賓語。

當我需要訪問所選對象的其他屬性時，就會出現我的問題。 ng-option使我可以將對象綁定到該下拉列表，這很棒。 但是，如果我拉出名稱以將其綁定到模型：

<select ng-model="myModel.name" ng-options="fieldlist.fields.name as fieldlist.fields.name for fieldlist in metrics">

我沒有引用該對象的其余屬性。 我需要使用所選對象的另一個屬性，例如fieldlist.fields.location ，才能在ng-change函數中執行其他操作。 所以

這可能嗎？ 我的Angular天真顯示太多嗎？

Answer 1

我相信你可以做到：

ng-model="myModel" ng-options="fieldlist.fields as fieldlist.fields.name for fieldlist in metrics"

假設您希望myModel包含所選字段列表中的所有字段

根據您的評論-這可能不是最佳做法，只是我對如何做的最初想法，您可以執行以下操作：

ng-model="selectedItem" ng-change="setSelectedItem()" ng-options="fieldlist.fields.name as fieldlist.fields.name for fieldlist in metrics"

然后在您的控制器中

$scope.setSelectedItem() = function() { $scope.myModel.name = selectedItem.name; };

或刪除ng-change並執行

$scope.watch(selectedItem, function() { $scope.myModel.name = $scope.selectedItem.name }

然后，您可以從$scope.selectedItem獲得所需的任何屬性。

Answer 2

有點晚了，但是我發現是否有人可以使用它是很好的信息。 它仍然有點古怪，但是使它更干凈。 Angular發布了ngModelOptions指令，該指令除其他有用的功能外，還允許您將ngModel定義為getter / setter函數。 使用此功能，您可以刪除該煩人的ng-change或手表（可能還有$ Digest？）。 只需將您的更新功能放置為ng-model並以這種方式設置您的項目。

<select ng-model="updatefielset" ng-model-options="{getterSetter:true}" ng-options="fieldlist.fields as fieldlist.fields.name for fieldlist in metrics">



$scope.updatefielset(item) = function() 
{ 
  if(angular.isDefined(item)
  {
   $scope.myModel.A = item.A; 
   $scope.myModel.B = item.B;
   $scope.Val = item;
  } 
  return $scope.Val;
};

https://docs.angularjs.org/api/ng/directive/ngModelOptions