ng-optionsの空の<option>がすべての選択をクリアするのはなぜですか？

私はデモのためのプランナーhereがあります。ng-optionsの空の<option>がすべての選択をクリアするのはなぜですか？

私は、ng-options selectに空白のオプションタグを使用しています。

<select ng-model="food.fruitOne" 
     ng-options="fruit.id as fruit.name for fruit in fruits | filter: food.fruitTwo && {id: '!' + food.fruitTwo} | filter: food.fruitThree && {id: '!' + food.fruitThree}"> 
     <option value="">-</option> 
    </select>

選択リストは、3種類のngモデルで3回使用されます。不思議なことに、選択肢のいずれかを選択してその選択肢を空白のオプションに戻すと、3つの選択肢すべてが空白の選択肢に変わり、すべての選択肢が切り取られます。

興味深い。 thisでは、フィルタを使用しないplunkでは、セレクタはそのように動作しません。明らかにフィルターが原因です。どうして？

ありがとうございます！

出典

2016-10-31 RushVan

これはng-repeatにあなたのフィルタに誤りです。

がplunker

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
    $scope.food = { 
 
    fruitOne: "", 
 
    fruitTwo: "", 
 
    fruitThree: "" 
 
    }; 
 
    $scope.fruits = [{ 
 
    id: 1, 
 
    name: 'apple' 
 
    }, { 
 
    id: 2, 
 
    name: 'banana' 
 
    }, { 
 
    id: 3, 
 
    name: 'orange' 
 
    }]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="plunker" ng-controller="MainCtrl"> 
 
    <label>Choice 1</label> 
 
    <select ng-model="food.fruitOne" ng-options="fruit.id as fruit.name for fruit in fruits | filter:food.fruitTwo!=''?{id: '!' + food.fruitTwo}:{} | filter:food.fruitThree!=''? {id: '!' + food.fruitThree}:{}"> 
 
    <option value=""></option> 
 
    </select> 
 
    <label>Choice 2</label> 
 
    <select ng-model="food.fruitTwo" ng-options="fruit.id as fruit.name for fruit in fruits | filter: food.fruitOne!=''?{id: '!' + food.fruitOne}:{} | filter: food.fruitThree!=''?{id: '!' + food.fruitThree}:{}"> 
 
    <option value=""></option> 
 
    </select> 
 
    <label>Choice 3</label> 
 
    <select ng-model="food.fruitThree" ng-options="fruit.id as fruit.name for fruit in fruits | filter: food.fruitOne!=''?{id: '!' + food.fruitOne}:{} | filter: food.fruitTwo!=''?{id: '!' + food.fruitTwo}:{}"> 
 
    <option value=""></option> 
 
    </select> 
 
    <hr> 
 
    <p>Choice 1 - {{ food.fruitOne }}</p> 
 
    <p>Choice 2 - {{ food.fruitTwo }}</p> 
 
    <p>Choice 3 - {{ food.fruitThree }}</p> 
 
</body>

出典

2016-11-01 09:31:28

修正！ありがとう。遅れて申し訳ありませんが、答えとしてこれを指摘しています - 少し別のものに移動しました。 – RushVan

ng-optionsおよびoptionは一緒に機能しません。

これらのうちの1つのみを使用する必要があります。 両方とも同じ指令では機能しません。

特定の値を追加する最も良い方法は、モデルに含めることです。そのためには、フィルタをカスタマイズする必要があります。それが私がプロジェクトでやった方法です。

これにあなたのモデルを変更し

：

$scope.fruits = [ 
    {id: 4, name: ' '}, 
    {id: 1, name: 'apple'}, 
    {id: 2, name: 'banana'}, 
    {id: 3, name: 'orange'} 
    ];

出典

2016-10-31 15:53:53

[OK]を更新参照してください、そう何が私のNG-オプションに無価値オプションを追加する解決策になるのでしょうか？選択したオプションを削除するフィルターが必要なので、選択を解除する機会を与える必要があります。 – RushVan

最も良い方法は、それをリストに含めることです。そのためには、フィルタをカスタマイズする必要があります。それが私のやり方です。 –

例がありますか？ – RushVan

ng-optionsの空の<option>がすべての選択をクリアするのはなぜですか？

答えて

関連する問題