<select> getter-setter接收字符串形式的对象参数

Question

为什么moo对象参数以[object Object]字符串形式出现？

​

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



var ctrls = angular.module('controllers', []);
ctrls.controller('myController', ['$scope', function ($scope) {
    
    $scope.moos = [
        {'id':1, 'name': 'foo'}, {'id':2, 'name': 'boo'}
    ];
    
    $scope.proxy = {
        setter: function (moo) {
            if(!arguments.length)  return;
            console.log(moo);
            $scope.moo = moo;
        }
    };    
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <p>{{moo.name}}</p>
    <select ng-model="proxy.setter" ng-model-options="{ getterSetter: true }">
        <option ng-selected="moo.id===m.id" ng-value="m" ng-repeat="m in moos">{{m.name}}</option>
    </select>
</div>

​

Answer 1

ng-value会将一个字符串放入option的值中。转换成字符串的javascript对象是[object Object]。

但是您可以将m.id放在ng-value中，以便在javascript代码中检索它。下面是一个示例：

​

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



var ctrls = angular.module('controllers', []);
ctrls.controller('myController', ['$scope', function ($scope) {
    
    $scope.moos = [
        {'id':1, 'name': 'foo'}, {'id':2, 'name': 'boo'}
    ];
    
    $scope.proxy = {
        setter: function (id) {
            if(!arguments.length)  return;
          
            var moo = $scope.moos.filter(function(moo) {
              return moo.id == id;  
            })[0];
          
            console.log(moo);
            $scope.moo = moo;
        }
    };    
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <p>{{moo.name}}</p>
    <select ng-model="proxy.setter" ng-model-options="{ getterSetter: true }">
        <option ng-selected="moo.id===m.id" ng-value="m.id" ng-repeat="m in moos">{{m.name}}</option>
    </select>
</div>

​