Question

我是anjularjs的新手。我想按ID和名称对象分组选项。我可以通过object.id对其进行分组，并将object.name显示为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中获得类似的内容：

<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>

Answer 1

我无法使用ng-options执行此操作，而且我使用ng-repeat执行此操作。我不得不修改数组并添加一个函数来为此选择。是的，它似乎不是最好的解决方案，但仍然。

＆＃13;

(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);

＆＃13;

<!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>

＆＃13;

angularjs ngoption组与另一个optgroup标签

1 个答案: