如何将整个 select 选项对象设置为模型？

Question

我发现 selected 模型仅包含选项对象属性的 ID 属性。 selected 模型是否可以包含整个对象？

HTML

<div ng-dropdown-multiselect="" options="exampleData" selected-model="exampleModel"></div>

JavaScript

$scope.exampleModel = []; 
$scope.exampleData = [ 
   {id: 1, code: 'CA': label: "California"}, 
   {id: 2, code: 'MN' label: "Minnesota"}, 
   {id: 3, code: 'NY', label: "New York"} ];

因此，在这种情况下，如果我 select 第一个选项，模型将变为以下内容：

$scope.exampleModel = [{"id":"CA"}]

我需要模型包含整个选项对象，如下所示：

$scope.exampleModel = [{id: 1, code: 'CA': label: "California"}]

Answer 1

您可以在 onSelectionChanged 回调事件中更新它。

var app = angular.module('app', ['angularjs-dropdown-multiselect']);

app.controller('MainCtrl', function($scope) {
  $scope.exampleModel = [];
  $scope.exampleData = [{
    id: 1,
    code: 'CA',
    label: "California"
  }, {
    id: 2,
    code: 'MN',
    label: "Minnesota"
  }, {
    id: 3,
    code: 'NY',
    label: "New York"
  }];
  $scope.exampleEvents = {
    onSelectionChanged: function() {

      $scope.exampleModel.forEach(function(selectedData) {
        var data = $scope.exampleData.find(function(item) {
          return item.id == selectedData.id;
        });
        if (data != null) {
          angular.copy(data, selectedData);
        }
      });
      console.log("Change:", $scope.exampleModel);
    }
  }
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-dropdown-multiselect/1.11.8/angularjs-dropdown-multiselect.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-dropdown-multiselect="" options="exampleData" selected-model="exampleModel" events="exampleEvents"></div>
</body>

</html>

Answer 2

将 externalIdProp : '' 添加到如下额外设置中： {enableSearch: true, scrollableHeight: '400px', scrollable: true, externalIdProp : ''}

这是linkhttps://github.com/dotansimha/angularjs-dropdown-multiselect/issues/396

如何将整个 select 选项对象设置为模型？

How can I set an entire select option object as a model?

multi-select

angularjs