Adding optgroups in angularjs is proving tricky

Question

I'm using angularjs, and I've been trying to create an optgroup for the past 2 days while working on some other stuff, and I'm stumped. I had to create an ng-options, but didn't consider an optgroup until I realized I needed one. I tried using the ng-options to add it in, but it would either ignore it completely, mess up the code or ignore the options completely.

I had no clue if I could actually use the (double) ampersand, so I tried combining both ng-options, but to no avail. Furthermore, I toyed around with a specific code found in odetocode (which seemed promising, but could not be incorporated with my code, because of its own limited structure).

Everything I tried breaks my code. The original code is below (the one prior to most of my many other mods), but I also have the plunker for it:

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

    };
  });


})();

score 27 · Accepted Answer · answered Jul 17 '14 at 19:17

27

Not sure what you want to group them by so I added an extra property type:

Syntax:

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

DEMO

answered Jul 17 '14 at 19:17

charlietfl

170,828
13
121
150

1

Ah damn lol, now I understand where I went wrong. I actually had that before deleting it from my code, but my optgroup was at the end. I had used the type before hand, but I didn't understand back then that EVERY option needed the type:Type 1" etc. Now that I understand that, it works well :) Basically, once you use a type, it creates it once and every one of the options are categorized UNDER that type. Thank you for making me understand that :D – user54600 Jul 17 '14 at 19:46
think of it a bit like making a query on each element of the array – charlietfl Jul 17 '14 at 19:50
oh..and don't feel bad. `ng-options` takes some time to get used to – charlietfl Jul 17 '14 at 19:51
Don't forget that you must be using the `ng-model` attribute on this ` – Hartley Brody Nov 21 '19 at 19:04
I believe the syntax is in the wrong order, should be: `option.value as option.name...` – dean grande Dec 23 '19 at 01:24
@deangrande Then why is it working fine in my plunker demo link? – charlietfl Dec 23 '19 at 02:48
1

@charlietfl because `option.name` and `option.value` hold the exactly the same value in your plunkr, so you can't see the issue. – dean grande Dec 23 '19 at 03:57

score 7 · Answer 2 · edited Apr 29 '21 at 01:42

7

There's a good example of this in the AngularJS docs, if you want to group on an attribute of the options you can add a 'group by' clause. 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' }
];

and an ng-options of:

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

edited Apr 29 '21 at 01:42

TombMedia

1,962
2
22
27

answered Jul 17 '14 at 19:15

zetetic

47,184
10
111
119

1

As I said to charlietfl as his answer came first (which I am saying to you as well): Ah damn lol, now I understand where I went wrong. I actually had that before deleting it from my code, but my optgroup was at the end. I had used the type before hand, but I didn't understand back then that EVERY option needed the type:Type 1" etc. Now that I understand that, it works well :) Basically, once you use a type, it creates it once and every one of the options are categorized UNDER that type. Thank you for making me understand that :D – user54600 Jul 17 '14 at 19:47
@zetetic: Is that "good example" still in the AngularJS docs? I cannot find anything about `group by` on the page that you referenced. – user1438038 Mar 10 '21 at 12:56
@user1438038: sorry, no idea. Could very well be a stale link. I swear it was there seven years ago. – zetetic Mar 18 '21 at 00:34

Adding optgroups in angularjs is proving tricky

2 Answers2