chom chom - 1 month ago 9
AngularJS Question

group by in ng-options giving duplicate data in Internet Explorer

I am listing states in a drop down menu. In google chrome it works fine. In Interner explorer the groups are getting duplicated. I am getting total 4 groups where as I see 2 groups in chrome. How can I get correct output in IE as well? Thanks in advance.

Following is the code.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="state.name + ' - ' + state.country group by state.country for state in states | filter: {country:model.country}:true | orderBy: ['-country', 'name']">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.states = [
{'name': 'Alabama', 'abbrev': 'AL', 'country': 'US'},
{'name': 'Alaska', 'abbrev': 'AK', 'country': 'US'},
{'name': 'Arizona', 'abbrev': 'AZ', 'country': 'US'},
{'name': 'Arkansas', 'abbrev': 'AR', 'country': 'US'},
{'name': 'California', 'abbrev': 'CA', 'country': 'US'},
{'name': 'Colorado', 'abbrev': 'CO', 'country': 'US'},
{'name': 'Connecticut', 'abbrev': 'CT', 'country': 'US'},
{'name': 'Delaware', 'abbrev': 'DE', 'country': 'US'},
{'name': 'District of Columbia', 'abbrev': 'DC', 'country': 'US'},
{'name': 'Florida', 'abbrev': 'FL', 'country': 'US'},
{'name': 'Georgia', 'abbrev': 'GA', 'country': 'US'},
{'name': 'Hawaii', 'abbrev': 'HI', 'country': 'US'},
{'name': 'Idaho', 'abbrev': 'ID', 'country': 'US'},
{'name': 'Illinois', 'abbrev': 'IL', 'country': 'US'},
{'name': 'Indiana', 'abbrev': 'IN', 'country': 'US'},
{'name': 'Iowa', 'abbrev': 'IA', 'country': 'US'},
{'name': 'Kansas', 'abbrev': 'KS', 'country': 'US'},
{'name': 'Kentucky', 'abbrev': 'KY', 'country': 'US'},
{'name': 'Louisiana', 'abbrev': 'LA', 'country': 'US'},
{'name': 'Maine', 'abbrev': 'ME', 'country': 'US'},
{'name': 'Maryland', 'abbrev': 'MD', 'country': 'US'},
{'name': 'Massachusetts', 'abbrev': 'MA', 'country': 'US'},
{'name': 'Michigan', 'abbrev': 'MI', 'country': 'US'},
{'name': 'Minnesota', 'abbrev': 'MN', 'country': 'US'},
{'name': 'Mississippi', 'abbrev': 'MS', 'country': 'US'},
{'name': 'Missouri', 'abbrev': 'MO', 'country': 'US'},
{'name': 'Montana', 'abbrev': 'MT', 'country': 'US'},
{'name': 'Nebraska', 'abbrev': 'NE', 'country': 'US'},
{'name': 'Nevada', 'abbrev': 'NV', 'country': 'US'},
{'name': 'New Hampshire', 'abbrev': 'NH', 'country': 'US'},
{'name': 'New Jersey', 'abbrev': 'NJ', 'country': 'US'},
{'name': 'New Mexico', 'abbrev': 'NM', 'country': 'US'},
{'name': 'New York', 'abbrev': 'NY', 'country': 'US'},
{'name': 'North Carolina', 'abbrev': 'NC', 'country': 'US'},
{'name': 'North Dakota', 'abbrev': 'ND', 'country': 'US'},
{'name': 'Ohio', 'abbrev': 'OH', 'country': 'US'},
{'name': 'Oklahoma', 'abbrev': 'OK', 'country': 'US'},
{'name': 'Oregon', 'abbrev': 'OR', 'country': 'US'},
{'name': 'Pennsylvania', 'abbrev': 'PA', 'country': 'US'},
{'name': 'Puerto Rico', 'abbrev': 'PR', 'country': 'US'},
{'name': 'Rhode Island', 'abbrev': 'RI', 'country': 'US'},
{'name': 'South Carolina', 'abbrev': 'SC', 'country': 'US'},
{'name': 'South Dakota', 'abbrev': 'SD', 'country': 'US'},
{'name': 'Tennessee', 'abbrev': 'TN', 'country': 'US'},
{'name': 'Texas', 'abbrev': 'TX', 'country': 'US'},
{'name': 'Utah', 'abbrev': 'UT', 'country': 'US'},
{'name': 'Vermont', 'abbrev': 'VT', 'country': 'US'},
{'name': 'Virginia', 'abbrev': 'VA', 'country': 'US'},
{'name': 'Washington', 'abbrev': 'WA', 'country': 'US'},
{'name': 'West Virginia', 'abbrev': 'WV', 'country': 'US'},
{'name': 'Wisconsin', 'abbrev': 'WI', 'country': 'US'},
{'name': 'Wyoming', 'abbrev': 'WY', 'country': 'US'},
{'name': 'Alberta', 'abbrev': 'AB', 'country': 'CA'},
{'name': 'British Columbia', 'abbrev': 'BC', 'country': 'CA'},
{'name': 'Manitoba', 'abbrev': 'MB', 'country': 'CA'},
{'name': 'New Brunswick', 'abbrev': 'NB', 'country': 'CA'},
{'name': 'Newfoundland and Labrador', 'abbrev': 'NL', 'country': 'CA'},
{'name': 'Nova Scotia', 'abbrev': 'NS', 'country': 'CA'},
{'name': 'Northwest Territories', 'abbrev': 'NT', 'country': 'CA'},
{'name': 'Nunavut', 'abbrev': 'NU', 'country': 'CA'},
{'name': 'Ontario', 'abbrev': 'ON', 'country': 'CA'},
{'name': 'Prince Edward Island', 'abbrev': 'PE', 'country': 'CA'},
{'name': 'Quebec', 'abbrev': 'QC', 'country': 'CA'},
{'name': 'Saskatchewan', 'abbrev': 'SK', 'country': 'CA'},
{'name': 'Yukon', 'abbrev': 'YT', 'country': 'CA'}
];
});
</script>

<p>This example shows how to fill a dropdown list using the ng-options directive.</p>

</body>
</html>

Answer

This issue is internal to Angular and has been fixed in Angular 1.5.0. Update your Angular version to 1.5.0 or higher and it should work correctly.

https://github.com/angular/angular.js/issues/13487

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="state.name + ' - ' + state.country group by state.country for state in states | filter: {country:model.country}:true | orderBy: ['-country', 'name']">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.states = [
            {'name': 'Alabama', 'abbrev': 'AL', 'country': 'US'},
            {'name': 'Alaska', 'abbrev': 'AK', 'country': 'US'},
            {'name': 'Arizona', 'abbrev': 'AZ', 'country': 'US'},
            {'name': 'Arkansas', 'abbrev': 'AR', 'country': 'US'},
            {'name': 'California', 'abbrev': 'CA', 'country': 'US'},
            {'name': 'Colorado', 'abbrev': 'CO', 'country': 'US'},
            {'name': 'Connecticut', 'abbrev': 'CT', 'country': 'US'},
            {'name': 'Delaware', 'abbrev': 'DE', 'country': 'US'},
            {'name': 'District of Columbia', 'abbrev': 'DC', 'country': 'US'},
            {'name': 'Florida', 'abbrev': 'FL', 'country': 'US'},
            {'name': 'Georgia', 'abbrev': 'GA', 'country': 'US'},
            {'name': 'Hawaii', 'abbrev': 'HI', 'country': 'US'},
            {'name': 'Idaho', 'abbrev': 'ID', 'country': 'US'},
            {'name': 'Illinois', 'abbrev': 'IL', 'country': 'US'},
            {'name': 'Indiana', 'abbrev': 'IN', 'country': 'US'},
            {'name': 'Iowa', 'abbrev': 'IA', 'country': 'US'},
            {'name': 'Kansas', 'abbrev': 'KS', 'country': 'US'},
            {'name': 'Kentucky', 'abbrev': 'KY', 'country': 'US'},
            {'name': 'Louisiana', 'abbrev': 'LA', 'country': 'US'},
            {'name': 'Maine', 'abbrev': 'ME', 'country': 'US'},
            {'name': 'Maryland', 'abbrev': 'MD', 'country': 'US'},
            {'name': 'Massachusetts', 'abbrev': 'MA', 'country': 'US'},
            {'name': 'Michigan', 'abbrev': 'MI', 'country': 'US'},
            {'name': 'Minnesota', 'abbrev': 'MN', 'country': 'US'},
            {'name': 'Mississippi', 'abbrev': 'MS', 'country': 'US'},
            {'name': 'Missouri', 'abbrev': 'MO', 'country': 'US'},
            {'name': 'Montana', 'abbrev': 'MT', 'country': 'US'},
            {'name': 'Nebraska', 'abbrev': 'NE', 'country': 'US'},
            {'name': 'Nevada', 'abbrev': 'NV', 'country': 'US'},
            {'name': 'New Hampshire', 'abbrev': 'NH', 'country': 'US'},
            {'name': 'New Jersey', 'abbrev': 'NJ', 'country': 'US'},
            {'name': 'New Mexico', 'abbrev': 'NM', 'country': 'US'},
            {'name': 'New York', 'abbrev': 'NY', 'country': 'US'},
            {'name': 'North Carolina', 'abbrev': 'NC', 'country': 'US'},
            {'name': 'North Dakota', 'abbrev': 'ND', 'country': 'US'},
            {'name': 'Ohio', 'abbrev': 'OH', 'country': 'US'},
            {'name': 'Oklahoma', 'abbrev': 'OK', 'country': 'US'},
            {'name': 'Oregon', 'abbrev': 'OR', 'country': 'US'},
            {'name': 'Pennsylvania', 'abbrev': 'PA', 'country': 'US'},
            {'name': 'Puerto Rico', 'abbrev': 'PR', 'country': 'US'},
            {'name': 'Rhode Island', 'abbrev': 'RI', 'country': 'US'},
            {'name': 'South Carolina', 'abbrev': 'SC', 'country': 'US'},
            {'name': 'South Dakota', 'abbrev': 'SD', 'country': 'US'},
            {'name': 'Tennessee', 'abbrev': 'TN', 'country': 'US'},
            {'name': 'Texas', 'abbrev': 'TX', 'country': 'US'},
            {'name': 'Utah', 'abbrev': 'UT', 'country': 'US'},
            {'name': 'Vermont', 'abbrev': 'VT', 'country': 'US'},
            {'name': 'Virginia', 'abbrev': 'VA', 'country': 'US'},
            {'name': 'Washington', 'abbrev': 'WA', 'country': 'US'},
            {'name': 'West Virginia', 'abbrev': 'WV', 'country': 'US'},
            {'name': 'Wisconsin', 'abbrev': 'WI', 'country': 'US'},
            {'name': 'Wyoming', 'abbrev': 'WY', 'country': 'US'},
            {'name': 'Alberta', 'abbrev': 'AB', 'country': 'CA'},
            {'name': 'British Columbia', 'abbrev': 'BC', 'country': 'CA'},
            {'name': 'Manitoba', 'abbrev': 'MB', 'country': 'CA'},
            {'name': 'New Brunswick', 'abbrev': 'NB', 'country': 'CA'},
            {'name': 'Newfoundland and Labrador', 'abbrev': 'NL', 'country': 'CA'},
            {'name': 'Nova Scotia', 'abbrev': 'NS', 'country': 'CA'},
            {'name': 'Northwest Territories', 'abbrev': 'NT', 'country': 'CA'},
            {'name': 'Nunavut', 'abbrev': 'NU', 'country': 'CA'},
            {'name': 'Ontario', 'abbrev': 'ON', 'country': 'CA'},
            {'name': 'Prince Edward Island', 'abbrev': 'PE', 'country': 'CA'},
            {'name': 'Quebec', 'abbrev': 'QC', 'country': 'CA'},
            {'name': 'Saskatchewan', 'abbrev': 'SK', 'country': 'CA'},
            {'name': 'Yukon', 'abbrev': 'YT', 'country': 'CA'}
        ];
});
</script>


</body>
</html>

Comments