Adding optgroups in angularjs is proving tricky
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' }
];
}
};
});
})();
Answer
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"