Angular ng-option访问多个属性

Question

Say I have a backend call which returns a list of objects (and properties), and I use ng-option to stick one of the properties (the name) into the dropdown list, which is using ng-model to attach itself to my model object.

My problem comes in when I need to access other properties of the selected object. ng-option lets me bind objects to that dropdown, which is great. However, if I pull the name out to bind that to my model:

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

I lose reference to the rest of the object's properties. I need to use another property of the selected object, say fieldlist.fields.location , to perform some other action in an ng-change function. So

Is this possible? Is my Angular naiveté showing too much?

Answer 1

I believe you can do:

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

Assuming you want myModel to contain all the fields in the selected fieldlist

Per your comment - and this may not be best practice, just my initial thought on how I would do it, you could do something like:

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

and then in your controller

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

or remove the ng-change and do

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

And then you can get whatever property you need from $scope.selectedItem

Answer 2

A little late, but good information i found if anyone could use it. Its still a little odd, but it makes it a little cleaner. Angular released a ngModelOptions directive which, among other useful things, allows you to define the ngModel as a getter/setter function. Using this, you can remove that pesky ng-change or watch (and possibly a $Digest?). Simply place your update function as the ng-model and set your items that way.

<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