javascript - 为什么 AngularJS ng-model 返回 [object%20Object] 作为值而不是选项值(整数)？

Question

我在 AngularJS 中有一个选择，例如:

<select class="browser-default" ng-model="newParticipantFormData.groupId" ng-options="item as item.name for item in newParticipantFormData.availableGroups.results track by item.id">

                    </select>

我希望当用户在“select”中选择一个值时，我会得到 newParticipantFormData.groupId 中的值，但我得到的是:[object%20Object]，为什么？

在控制台中我可以看到这些值，如下所示:

 <option value="?" selected="selected" label=""></option>
 <option value="1819" label="Grupo 147258">Grupo 147258</option>
 <option value="1820" label="Grupo 258369">Grupo 258369</option>

Answer 1

如果您想传递项目 ID 选择该选项，请尝试此:

ng-options="item.id as item.name for item in newParticipantFormData.availableGroups.results"

而不是

ng-options="item as item.name for item in newParticipantFormData.availableGroups.results"

演示

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.newParticipantFormData = {
      "availableGroups" : { "results" : [
         {
           "id": 1819,
           "name": "Grupo 147258"
         },
         {
           "id": 1820,
           "name": "Grupo 258369"
         }
      ]}
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select class="browser-default" ng-model="newParticipantFormData.groupId" ng-options="item.id as item.name for item in newParticipantFormData.availableGroups.results"></select>
  {{newParticipantFormData.groupId}}
</div>