CODEWITHSUNDEEP
javascriptangularjs
Petya Naumova
Petya Naumova

Reputation: 717

AngularJS Ng-model-options not able to select object in getter-setter function

I have a problem selecting an object from ng-model with ng-model-options and getter-setter function. I am binding to the ng-model getter-setter function setGetSelectedItem which has to accept an object from ng-options - in my case, item and to assign its properies to the properties of another object specific_data. It does, the object is passed correctly but I am not able to select the option in the select options.

<select name="item" ng-model="setGetSelectedItem"
        ng-options="item as item.title for item in items"
        ng-model-options="{getterSetter: true}">
  <option value="">-- Please select --</option>
</select>

And in the controller:

$scope.items = [{

"description": "Item description",
  "item_type": "OUT",
  "id": 1,
  "title": "Default item"
}];

$scope._objectDataRaw = {
  specific_data: {}
};

$scope.setGetSelectedItem = function(value) {

if (arguments.length) {
  $scope._objectDataRaw.specific_data.property_id = value.id;
  $scope._objectDataRaw.specific_data.property_title = value.title;
  $scope._objectDataRaw.specific_data.property_description = 
  value.description;

   return $scope._objectDataRaw.specific_data; 
 }
};

Here is a jsfiddle with the problem: Can not select the object

And I need it to pass it as an object, and not as object.property. Any help would be greatly appreciated.

Upvotes: 1

Views: 356

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Instead of using the getterSetter option, use the ng-change directive to set the specific_data object:

<select name="item" ng-model="selectedItem"
        ng-options="item as item.title for item in items"
        ̶n̶g̶-̶m̶o̶d̶e̶l̶-̶o̶p̶t̶i̶o̶n̶s̶=̶"̶{̶g̶e̶t̶t̶e̶r̶S̶e̶t̶t̶e̶r̶:̶ ̶t̶r̶u̶e̶}̶"̶
        ng-change="setSelectedItem(selectedItem)" >
  <option value="">-- Please select --</option>
</select>

The DEMO

angular.module("app",[])
.controller("ctrl", function($scope) {
    $scope.items = [{
 
      "description": "Item description",
      "item_type": "OUT",
      "id": 1,
      "title": "Default item"
    }];
    
    $scope._objectDataRaw = {
      specific_data: {}
    };
    
    $scope.setSelectedItem = function(value) {
      $scope._objectDataRaw.specific_data.property_id = value.id;
      $scope._objectDataRaw.specific_data.property_title = value.title;
      $scope._objectDataRaw.specific_data.property_description = 
      value.description;
    };
})
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <select name="item" ng-model="selectedItem"
        ng-options="item as item.title for item in items"
        ng-change="setSelectedItem(selectedItem)" >
      <option value="">-- Please select --</option>
    </select> 
    <hr>
    _objectDataRaw={{_objectDataRaw}}
  </body>

Upvotes: 1

br1
br1

Reputation: 377

I think your code should be:

angular.module('myApp', [])
      .controller('Ctrl1', function($scope) {

        $scope.items = [{
          "description": "Item description",
          "item_type": "OUT",
          "id": 1,
          "title": "Default item"
        }];
        
        $scope._objectDataRaw = {
          specific_data: {}
        };
        
        $scope.setGetSelectedItem = function(value) {
          if (arguments.length) {
          
            $scope._objectDataRaw.specific_data.property_id = value.id;
            $scope._objectDataRaw.specific_data.property_title = value.title;
            $scope._objectDataRaw.specific_data.property_description = value.description;
            
            return $scope._objectDataRaw.specific_data;
          }
        };
      });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl1">
      <div>
        <select name="item" ng-repeat="item in items">
          <option value="">-- Please select --</option>
          <option value="" ng-click="setGetSelectedItem(item)">{{item.title}}</option>
        </select> 
      </div>
    </div>

Upvotes: 1

Related Questions