angularjs ngoptionグループと別のoptgroupラベル

私はanjularjsで新しいです。私はIDと名前を持つオブジェクトでオプションをグループ化したい。 object.idでグループ化し、object.nameをoptgroupラベルとして表示できますか？例えばangularjs ngoptionグループと別のoptgroupラベル

：

(function(angular) { 
 
    'use strict'; 
 
angular.module('defaultValueSelect', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
    $scope.data = { 
 
    availableOptions: [ 
 
     {id: '0', name: 'Option A', group: {id:0, name:'group 0'}}, 
 
     {id: '1', name: 'Option B', group: {id:1, name:'group 1'}}, 
 
     {id: '2', name: 'Option C', group: {id:1, name:'group 1'}}, 
 
     {id: '3', name: 'Option D', group: {id:2, name:'group 1'}} 
 
    ], 
 
    selectedOption: {id: '0', name: 'Option A', group: {id:0, name:'group 0'}} 
 
    }; 
 
}]); 
 
})(window.angular);

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="defaultValueSelect"> 
 
    <div ng-controller="ExampleController"> 
 
     <form name="myForm"> 
 
     <label for="mySelect">Make a choice:</label> 
 
     <select name="mySelect" id="mySelect" 
 
      ng-options="option.name group by option.group.id for option in data.availableOptions track by option.id" 
 
      ng-model="data.selectedOption"></select> 
 
     </form> 
 
     <hr> 
 
     <tt>option = {{data.selectedOption}}</tt><br/> 
 
    </div> 
 
    </body> 
 

 
</html>

と私は選択して、このような何かを取得したい：

<select> 
 
    <optgroup label="group 0"> 
 
     <option>Option A</option> 
 
    </optgroup> 
 
    <optgroup label="group 1"> 
 
     <option>Option B</option> 
 
     <option>Option C</option> 
 
    </optgroup> 
 
    <optgroup label="group 1"> 
 
     <option>Option D</option> 
 
    </optgroup> 
 
</select>

出典

2016-04-04 Aleksandr

あなたの予想される部分が明確ではありません。期待は何ですか？コードスニペット> –

と同じですか？ごめんなさい。今私はポストに私の期待を追加しました。 – Aleksandr

私は私を行うことができませんでしng-optionsを使って、私はng-repeatでそれを行いました。私は配列を変更し、これを選択する関数を追加しなければならなかった。はい、それは最善の解決策ではないようですが、それでもです。

(function(angular) { 
 
    'use strict'; 
 
angular.module('defaultValueSelect', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
    $scope.data = { 
 
    availableOptions: [ 
 
     {id: '0', name: 'Option A', group: {id:0, name:'group 0'}}, 
 
     {id: '1', name: 'Option B', group: {id:1, name:'group 1'}}, 
 
     {id: '2', name: 'Option C', group: {id:1, name:'group 1'}}, 
 
     {id: '3', name: 'Option D', group: {id:2, name:'group 1'}} 
 
    ], 
 
    selectedOption: {id: '0', name: 'Option A', group: {id:0, name:'group 0'}} 
 
    }; 
 
    
 
    //id of selected element 
 
    $scope.selectedOptionId = '0'; 
 
    //modify the array 
 
    $scope._data = []; 
 
    for(var i = 0; i<$scope.data.availableOptions.length; i++){ 
 
     var add = true; 
 
     if($scope._data.length>0) { 
 
     for(var j = 0; j<$scope._data.length;j++) { 
 
      if($scope.data.availableOptions[i].group.id == $scope._data[j].id){ 
 
      $scope._data[j].options.push(
 
       { 
 
       id: $scope.data.availableOptions[i].id, 
 
       name: $scope.data.availableOptions[i].name 
 
       }); 
 
      add = false; 
 
      } 
 
     } 
 
     } 
 
     if(add) { 
 
     $scope._data.push(
 
      { 
 
      id: $scope.data.availableOptions[i].group.id, 
 
      name: $scope.data.availableOptions[i].group.name, 
 
      options: [ 
 
       {id: $scope.data.availableOptions[i].id, 
 
       name: $scope.data.availableOptions[i].name 
 
       }]}); 
 
     } 
 
    }; 
 
    //looking element of the selected id 
 
    $scope.selectOption = function(){ 
 
     for(var i = 0; i<$scope.data.availableOptions.length; i++){ 
 
     if($scope.data.availableOptions[i].id == $scope.selectedOptionId){ 
 
      $scope.data.selectedOption = $scope.data.availableOptions[i]; 
 
      break; 
 
     } 
 
     } 
 
    }; 
 
    
 
}]); 
 
})(window.angular);

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="defaultValueSelect"> 
 
    <div ng-controller="ExampleController"> 
 
     <form name="myForm"> 
 
     <label for="mySelect">Old version:</label> 
 
     <select name="mySelect" id="mySelect" 
 
      ng-options="option.name group by option.group.id for option in data.availableOptions track by option.id" 
 
      ng-model="data.selectedOption"></select> 
 
     </form> 
 
     
 
     <hr> 
 
     <form name="_myForm"> 
 
     <label for="_mySelect">New versione:</label> 
 
     <select ng-model="selectedOptionId" ng-change="selectOption()"> 
 
      <optgroup ng-repeat="group in _data" label="{{group.name}}"> 
 
      <option ng-repeat="option in group.options" value="{{option.id}}">{{option.name}}</option> 
 
      </optgroup> 
 
     </select> 
 
     </form> 
 
     <hr> 
 
     <tt>option = {{data.selectedOption}}</tt><br/> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2016-04-05 12:19:24 Aleksandr

angularjs ngoptionグループと別のoptgroupラベル

答えて

関連する問題