Question

我在使用ng-model和getter-setter函数从ng-model-options中选择对象时遇到问题。我绑定到ng-model getter-setter函数setGetSelectedItem，它必须接受来自ng-options的对象 - 在我的情况下，item并将其属性分配给属性另一个对象specific_data。确实如此，对象被正确传递但我无法在选择选项中选择该选项。

<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>

在控制器中：

$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; 
 }
};

这是一个有问题的jsfiddle： Can not select the object

我需要它将它作为对象传递，而不是作为object.property传递。任何帮助将不胜感激。

Answer 1

我认为你的代码应该是：

＆＃13;

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;
          }
        };
      });

＆＃13;

<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>

＆＃13;

Answer 2

使用ng-change directive设置getterSetter对象，而不是使用specific_data选项：

<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>

AngularJS Ng-model-options无法在getter-setter函数中选择对象

2 个答案: