2015-02-07 3 views
0

У меня есть динамический блок 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; 
    } 
}; 
}]); 

ответ

0

Существует на самом деле predefin ed Угловая функция, которая делает то, что вы хотите сделать. Фильтр в 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 показывая это решение.

+0

Привет @Bricktop, я пытался динамически передавать модель. Разве это невозможно? – Jimi

+0

Привет @Jimi, я не уверен, что вы имеете в виду с динамической моделью; Я предполагаю, что модель имеет динамическую длину? Это должно быть возможно, но, вероятно, сложнее достичь. Я попытаюсь найти решение, но это может занять некоторое время. – Bricktop

+0

Если я передам значение из ng-model = "select1" в фильтр, он явно работает. Если я попытаюсь передать всю модель, с несколькими значениями в я получаю ошибки синтаксического анализа. Несомненно, это может быть передано как объект? – Jimi

Смежные вопросы