angularjs - 如何在角度 js 中使用带有标题的多选下拉菜单

Question

<div class="col-md-3">
        <select 
        ng-model="carId" >
         <option value="">Please select</option>
         <optgroup label="Common Car Makes">
          <option ng-repeat="car in ctrl.specificcar"  ng-value="car.name">{{car.name}}</option>
         </optgroup>
        
         <optgroup label="All Car Makes">
          <option ng-repeat="car in ctrl.allcars"  ng-value="car.name">{{car.name}}</option>
          
         </optgroup>
        </select>
        </div>

我已经尝试过这个及其对单个下拉列表的工作，我想在多选下拉列表中使用它。如何转换此代码？

标签： angularjsjsp

Answer 1

我希望这是您正在寻找的：

HTML：

 <div class="col-md-3">
        <select ng-model="car" ng-change="onSelect(car)">
         <option value="">Please select</option>
         <optgroup label="Common Car Makes">
          <option ng-repeat="car in specificList" value="{{car.groupName}}$${{car.id}}">{{car.name}}</option>
         </optgroup>
        
         <optgroup label="All Car Makes">
          <option ng-repeat="car in allList" value="{{car.groupName}}$${{car.id}}">{{car.name}}</option>
         </optgroup>
        </select>
       </div>    
     Selected Car: {{selectedCar}}

JS：

$scope.selectedCar = {};
    
    $scope.specificList = [{"id": 1, "name": "Audi", "groupName": "specific"}, {"id": 2,"name": "BMW", "groupName": "specific"}, {"id": 3,"name": "Toyota", "groupName": "specific"}];
    
    $scope.allList = [{"id": 1, "name": "Audi", "groupName": "all"}, {"id": 2,"name": "BMW", "groupName": "all"}, {"id": 3,"name": "Toyota", "groupName": "all"}];
    
    
    function findFromArray(arrName, value){
        var found = $scope[arrName].filter(function(v){
            return v.id == value;
      });
      
      return found ? found[0] : null;
    }
    
    $scope.onSelect = function(groupAndCar){
        var splitCar = groupAndCar.split('$$'),
          group = splitCar[0],
          carId = splitCar[1];
      
      
      $scope.selectedCar[group] = findFromArray(group+'List', carId);
      
    };

工作小提琴： https ://jsfiddle.net/7f895ybp/1/