группа angularjs ngoption с другой меткой optgroup

Я новичок с anjularjs. Я хочу группировать параметры по объекту с идентификатором и именем. Могу ли я сгруппировать его по объекту.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

Я не мог ли я t используя 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

ответ

Смежные вопросы