Дубликаты в ngOptions

Question

Я использую версию AngularJS 1.4.7 и имеют простой контроллер AngularJS, который содержит массив объектов. Я хотел бы отображать эти объекты в качестве опций в выборе по ngOptions.

Проблема в том, что каждый объект дублируется, и я не знаю почему. Этот дубликат представлен только в select, исходный объект выглядит отлично.

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>

Является ли это ошибка? Как удалить дубликаты без использования фильтра?

Примечание: Данная проблема возникла после обновления AngularJS от версии 1.3.19 до 1.4.7. Я прочитал журнал изменений, но он рассказывает только о добавлении track by - я добавил его, но без эффекта.

Answer 1

Это известная ошибка в 1.4.x, прежде чем 1.4.8 вы можете проверить issue.

Если вы должны использовать angularjs 1.4.7 версии, то вы можете использовать ng-show вместо ng-if

Вы можете найти список изменений и ошибок от angularjs github

Answer 2

Вы должны удалить тэг <option> из поля <select>. Поскольку все внутри него будет использоваться для каждого элемента, а сам тег <option> генерируется через директиву angularJS.

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 3

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 4

Если вы испытываете это в 1.4.8 или выше причины может быть this bug. Дубликаты могут быть созданы при использовании $compile. На странице ошибок есть некоторые обходные пути.