在 angularjs 中添加 optgroup 很棘手答案

【问题标题】：Adding optgroups in angularjs is proving tricky在 angularjs 中添加 optgroup 很棘手
【发布时间】：2021-04-29 09:42:40
【问题描述】：

我正在使用 angularjs，过去 2 天我一直在尝试创建一个 optgroup，同时处理其他一些事情，但我很难过。我必须创建一个 ng-options，但直到我意识到我需要一个 optgroup 时才考虑使用它。我尝试使用 ng-options 来添加它，但它要么完全忽略它，要么弄乱代码，要么完全忽略选项。

我不知道我是否真的可以使用（双）＆符号，所以我尝试结合两个 ng-options，但无济于事。此外，我玩弄了一个在 odetocode 中找到的特定代码（这看起来很有希望，但由于其自身有限的结构而无法与我的代码合并）。

我尝试的一切都会破坏我的代码。原始代码如下（在我的许多其他 mod 之前的那个），但我也有它的 plunker：

http://plnkr.co/edit/xCLe2GFShUMUlIySPLH9?p=info

HTML

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>


  <form name="FORM" ng-controller="appController">
<the-ratings  model="review.ratings">         
</the-ratings>
</form>

  </body>

</html>

(function(){

var app = angular.module('myApp',[]);

app.controller('appController', ['$scope', function($scope) {
      $scope.review = {};
      $scope.review.ratings = '5 stars';
  }])
  app.directive('theRatings', function() {

    return {
      restrict: 'E',
      scope: { model: '=' },
      template: '<select ng-model="model" ng-options="option.name as option.value for option in options"></select>',
      controller: function($scope) {
        $scope.options = [
            { name:'test', namegroup: 'Rate the product', value:'test2',valueName: 'NA' },
            { name: '1 star', value: '1 star' }, 
            { name: '2 stars', value: '2 stars' }, 
            { name: '3 stars', value: '3 stars' },
            { name: '4 stars', value: '4 stars' },
            { name: '5 stars', value: '5 stars' }
        ];
      }

    };
  });


})();

【问题讨论】：

标签： angularjs optgroup

【解决方案1】：

不确定你想对它们进行分组，所以我添加了一个额外的属性type：

语法：

ng-options="option.name as option.value group by option.type for option in options"

DEMO

【讨论】：

啊该死的大声笑，现在我明白我哪里出错了。在从我的代码中删除它之前，我实际上已经有了它，但我的 optgroup 是在最后。我以前使用过该类型，但当时我不明白每个选项都需要 type:Type 1" 等。现在我明白了，它工作得很好:) 基本上，一旦你使用了一个类型，它就会创建它每一个选项都归类在该类型下。感谢您让我理解：D
有点像对数组的每个元素进行查询
哦..别难过。 ng-options 需要一些时间来适应
不要忘记你必须在这个<select> 元素上使用ng-model 属性才能使ng-options 工作，出于某种原因...
@charlietfl 因为option.name 和option.value 在您的plunkr 中拥有完全相同的值，因此您看不到问题。

【解决方案2】：

the AngularJS docs 中有一个很好的例子，如果你想对选项的属性进行分组，你可以添加一个 'group by' 子句。例如：

$scope.options = [
  { name:'test', namegroup: 'Rate the product', value:'test2',valueName: 'NA' },
  { type: 'one', name: '1 star', value: '1 star' }, 
  { type: 'one', name: '2 stars', value: '2 stars' }, 
  { type: 'two', name: '3 stars', value: '3 stars' },
  { type: 'two', name: '4 stars', value: '4 stars' },
  { type: 'two', name: '5 stars', value: '5 stars' }
];

和一个ng-options：

"option.name as option.value group by option.type for option in options"

【讨论】：

正如我对 charlietfl 所说的，他的回答是第一位的（我也在对你说）：啊该死的大声笑，现在我明白我哪里出错了。在从我的代码中删除它之前，我实际上已经有了它，但我的 optgroup 是在最后。我以前使用过该类型，但当时我不明白每个选项都需要 type:Type 1" 等。现在我明白了，它工作得很好:) 基本上，一旦你使用了一个类型，它就会创建它每一个选项都归类在该类型下。感谢您让我理解：D
没问题。乐于助人！
@zetetic：这个“好例子”还在 AngularJS 文档中吗？我在您引用的页面上找不到任何关于 group by 的信息。
@user1438038：抱歉，不知道。很可能是一个陈旧的链接。我发誓它在七年前就在那里。