<select> getter-setter接收對象參數爲字符串

Question

爲什麼moo對象參數是[object Object] string？

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>