CODEWITHSUNDEEP
javascriptangularjs
kidwon
kidwon

Reputation: 4524

<select> getter-setter receives object parameter as string

Why is that moo object parameter comes as [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>

Upvotes: 0

Views: 667

Answers (1)

Magus
Magus

Reputation: 15124

ng-value will put a string into the value of the option. And a javascript object converted into a string is [object Object].

But you can put m.id in your ng-value to retrieves it in your javascript code. Here an example :

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>

Upvotes: 1

Related Questions