Question

我正在使用angularjs，而且我一直在努力创建一个过去2天的optgroup，同时处理其他一些事情，我很难过。我必须创建一个ng-options，但在我意识到我需要一个选项组之前，我们没有考虑过它。我尝试使用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>

JS

(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' }
        ];
      }

    };
  });


})();

Answer 1

不确定您要将它们分组，因此我添加了额外的属性type：

语法：

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

的 DEMO

Answer 2

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

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

在angularjs中添加optgroups证明是棘手的

2 个答案: