选择包含 2 个对象的单独值答案

【问题标题】：Separate values in select containing 2 object选择包含 2 个对象的单独值
【发布时间】：2022-01-15 06:57:18
【问题描述】：

My 包含 2 个不同的对象，obj1 和 obj2。

            <select multiple class="full-width" style="min-height: 200px" ng-model="vm.obj1" >
                <optgroup  label="First obj">
                    <option ng-repeat="item in vm.obj1" >{{item.valeur}}</option>
                </optgroup>
                <optgroup label="Second obj">
                    <option ng-repeat="item in vm.obj2">{{item.libelle}}</option>
                </optgroup>
            </select>

obj1 = {[
 0: {valeur: non},
 1: {valeur: oui}
]}

obj2 = {[
 0: {libelle: instance},
]}

当我选择值时得到什么：

我真正想要的：

我希望这些值位于单独的数组中，因为它们都来自不同的对象，所以 1 个数组带有 ['oui','non'] 和第二个数组带有 ['instance ']。我该怎么做？

下拉列表的视觉效果（对不起，我想用我在问题中制作的数据保持重点）

【问题讨论】：

标签： html angularjs

【解决方案1】：

您可以使用 ngChange 响应对 ngModel 值的任何更改并将其存储在新属性中：

function ctrl($scope) {
  $scope.options = [{
      name: "A",
      options: ["A1", "A2"]
    },
    {
      name: "B",
      options: ["B1", "B2"]
    },
  ];

  $scope.parseSelection = function() {
    const selected = {};
    
    // Loop over the selected options and check from which group they came
    $scope.rawSelected.forEach((value) => {
      $scope.options.forEach(({ name, options }) => {
        if (options.includes(value)) {
          // The option comes from the current group
          if (!selected[name]) {
            selected[name] = [];
          }
          selected[name].push(value);
        }
      });
    });
    $scope.selected = selected;
  };
}

angular.module("app", [])
  .controller("ctrl", ctrl)

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>


<div ng-app="app" ng-controller="ctrl">
  <select multiple ng-model="rawSelected" ng-change="parseSelection()">
    <optgroup ng-repeat="group in options" label="group.name">
      <option ng-repeat="option in group.options">{{option}}</option>
    </optgroup>
  </select>
  {{rawSelected}} - {{selected}}
</div>

【讨论】：