Duplicates in ngOptions

Question

I am using AngularJS version 1.4.7 and have a simple AngularJS controller that contains an array of objects. I would like to display these objects as options in the selection of ngOptions .

The problem is that every object is duplicated, and I don't know why. This duplicate is presented only in select, the source object looks great.

 angular .module('demo', []) .controller('DemoCtrl', DemoCtrl); function DemoCtrl() { var vm = this; vm.demoOptions = [ {value: 1, label: 'Demo 1'}, {value: 2, label: 'Demo 2'}, {value: 3, label: 'Demo 3'} ]; vm.selected = null;; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <div ng-app="demo" ng-controller="DemoCtrl as vm"> <select ng-options="item as item.label for item in vm.demoOptions track by item.value" ng-model="vm.selected"> <option value="" selected ng-if="vm.selected === null">-- select --</option> </select> <p ng-if="vm.selected !== null">Selected item: <code>{{vm.selected}}</code></p> <p ng-if="vm.selected === null">No item is selected.</p> <pre>vm.demoOptions == {{vm.demoOptions|json}}</pre> </div> 

This is mistake? How to remove duplicates without using a filter?

Note. This problem occurred after updating AngularJS from version 1.3.19 to 1.4.7 . I read the change log, but it only talks about adding track by - I added it, but without effect.

Answer 1

This is a known bug for 1.4.x to 1.4.8, you can check issue .

If you need to use the version with angular 1.4.7, you can use ng-show instead of ng-if

You can find the changes and the error from angularjs github

Answer 2

 angular .module('demo', []) .controller('DemoCtrl', DemoCtrl); function DemoCtrl($scope) { var vm = this; vm.demoOptions = [ {value: null, label: '--select--'}, {value: 1, label: 'Demo 1'}, {value: 2, label: 'Demo 2'}, {value: 3, label: 'Demo 3'} ]; vm.selected = vm.demoOptions[0]; $scope.$watch(function(){ return vm.selected}, function(newVal, oldVal){ if(!oldVal.value && newVal.value) { vm.demoOptions.shift(); } }); vm.setSelected = function(){ } } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <div ng-app="demo" ng-controller="DemoCtrl as vm"> <select ng-options="item.label for item in vm.demoOptions" ng-model="vm.selected" ng-change="vm.setSelected()"> </select> <p ng-if="vm.selected !== null">Selected item: <code>{{vm.selected}}</code></p> <p ng-if="vm.selected === null">No item is selected.</p> <pre>vm.demoOptions == {{vm.demoOptions|json}}</pre> </div> 

Answer 3

You need to remove the <option> from the <select> field. Since everything inside it will be used for each element, and the <option> tag itself is generated using the angularJS directive.

 angular .module('demo', []) .controller('DemoCtrl', DemoCtrl); function DemoCtrl() { var vm = this; vm.demoOptions = [ {value: 1, label: 'Demo 1'}, {value: 2, label: 'Demo 2'}, {value: 3, label: 'Demo 3'} ]; vm.selected = null;; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <div ng-app="demo" ng-controller="DemoCtrl as vm"> <select ng-options="item as item.label for item in vm.demoOptions track by item.value" ng-model="vm.selected" ng-change="vm.setSelected()"> </select> <p ng-if="vm.selected !== null">Selected item: <code>{{vm.selected}}</code></p> <p ng-if="vm.selected === null">No item is selected.</p> <pre>vm.demoOptions == {{vm.demoOptions|json}}</pre> </div> 

Answer 4

If you experience this in 1.4.8 or higher, this error may be the cause. Duplicates can be created using $compile . The error page has some workarounds.