角度過濾器選擇列表不包括選定的值

我有一個動態html塊，用戶可以爲其添加多個選擇列表。我想通過使用自定義過濾器來禁用用戶在之前的列表中做出的選擇。如何將動態模型傳遞給過濾器並檢查該值是否存在於已經生成的選擇列表中，這一部分我正在努力工作。我已創建plunker。我很感激幫助。角度過濾器選擇列表不包括選定的值

<body ng-app="app" ng-init="things=[{id:0,name:'thing1'},{id:1,name:'thing2'},{id:2,name:'thing3'},{id:3,name:'thing4'}]"> 
<select ng-model="fields.option1" ng-options="thing.name for thing in things | excludeFrom:fields.option2"></select> 
<select ng-model="fields.option2" ng-options="thing.name for thing in things | excludeFrom:fields.option1"></select> 
<select ng-model="fields.option2" ng-options="thing.name for thing in things | excludeFrom:fields.option1,fields.option2"></select>

angular.module('app',[]) 
.filter('excludeFrom', [function() { 
return function (things, selectedValue) { 
    if (!angular.isUndefined(things) && !angular.isUndefined(selectedValue)) { //&& selectedValue.length > 0) { 
     var tempThings = []; 
     angular.forEach(selectedValue, function (name) { 
      angular.forEach(things, function (things) { 
       if (angular.equals(things, selectedValue.name)) { 
        tempThings.push(things); 
       } 
      }); 
     }); 
     return tempThings; 
    } else { 
     return things; 
    } 
}; 
}]);

來源

2015-02-07 Jimi

其實是有一個普雷德凡編輯角功能，做你想做的事情。 Angular中的過濾器可以否定，這意味着您可以特別排除選項中的選項。我建議你在選擇時使用ng-init，否則你可能遇到未定義的過濾器選項。

下面是一些代碼顯示我的解決方案：

<select ng-model="select1" ng-init="select1 = things[0]" ng-options="thing.name for thing in things | filter:{name:'!'+select2.name}"></select> 
<select ng-model="select2" ng-init="select2 = things[1]" ng-options="thing.name for thing in things | filter:{name:'!'+select1.name}"></select>

而且here是表示動作它plnkr。

有關篩選的進一步閱讀，你可能要檢查出的API here

您還可以處理選擇部分爲一個數組，像這樣

<select ng-model="select[0]" ng-init="select[0] = things[0]" 
    ng-options="thing.name for thing in things | filter:{name:'!'+select[1].name}"></select> 
    <select ng-model="select[1]" ng-init="select[1] = things[1]" 
    ng-options="thing.name for thing in things | filter:{name:'!'+select[0].name}"></select>

不過，如果你想要有一個動態選擇，你將不得不寫一個自定義過濾器，我這樣做：

過濾：

.filter('exclude', [function() { 
    return function(input,select,selection){ 
    var newInput = []; 
    for(var i = 0; i < input.length; i++){ 
     var addToArray=true; 
     for(var j=0;j<select.length;j++){ 
      if(select[j].name===input[i].name){ 
       addToArray=false; 
      } 
     } 
     if(addToArray || input[i].name === selection.name){ 
     newInput.push(input[i]); 
     } 
    } 
    return newInput; 
    };

及用量：

<div ng-repeat="sel in select"> 
     <select ng-model="select[$index]" ng-init="sel" 
    ng-options="thing.name for thing in things | exclude:select:sel"></select> 
</div>

而且here是示出該溶液中的plunkr。

來源

2015-02-08 00:15:35 Bricktop

嗨@Bricktop，我試圖通過動態模型。這不可能嗎？ – Jimi 2015-02-08 07:57:50

Hi @Jimi，我不確定你的意思是什麼動態模型;我猜想有一個動態長度的模型？這應該是可能的，但可能難以實現。我會盡力找到解決方案，但可能需要一些時間。 – Bricktop 2015-02-08 09:51:38

如果我明確地將ng-model =「select1」中的值傳遞給過濾器，它將起作用。如果我嘗試傳遞整個模型，並有多個值，我會得到解析錯誤。當然，這可以作爲一個對象傳遞？ – Jimi 2015-02-08 10:00:11

角度過濾器選擇列表不包括選定的值

回答

相關問題