ngOptionsで重複しています

Question

私はAngularJSバージョン1.4.7を使用していて、オブジェクトの配列を含む単純なAngularJSコントローラを持っています。 ngOptionsでこれらのオブジェクトをオプションとして表示したいと思います。

問題は、すべてのオブジェクトが重複していて、なぜその理由がわからないということです。この複製は選択のみに表示され、ソースオブジェクトは上手く見えます。

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に更新した後に発生しました。私はchangelogを読んだが、それはtrack byの追加についてのみ伝える - 私はそれを加えたが効果はなかった。

Answer 1

それはあなたがissueを確認することができます1.4.8前に、1.4.xのための既知のバグです。あなたはangularjs 1.4.7バージョンを使用する必要がある場合

あなたはng-showを使用することができます代わりにng-if

あなたが1.4.8以上の理由でこれを経験している場合は、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

からの変更履歴やエラーを見つけることができます。 this bugとすることができる。 $compileを使用すると、重複を作成できます。バグページにはいくつかの回避策があります。