在多行下拉列表过滤 [英] dropdown filtering in multiple rows

问题描述

我有多行，每个包含标签下拉。
标签=（A，B，C，D，E，F，G，H，I，J，K，L的）
如果我们选择A作为第一行第三排一个标签，B，在第二行，C
我们应该只显示选定的标签，并在下拉列表中可用的标签。
例如：在第一行的下拉秀A，D，E，F，G，H，I，J，K，L
这应该是所有。我使用的JavaScript和角度JS。
可能有人请给解决这个有效的方式。
我有选择的标签标志和showLabels标志的想法，但我们需要循环它的每一行，并实时应用程序，我可以有超过100行，不用想循环100次，每一行。请帮助。

I have multiple rows and each contains a dropdown with Labels. Labels = ("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L") If we select "A" as a Label in first row, "B" in second row, "C" in third row We should only show the selected Label and the available Labels in the dropdown. Ex: In first row dropdown-show "A","D", "E", "F", "G", "H", "I", "J", "K", "L" This should be for all. I am using javascript and angular js. Could some one please give a efficient way to resolve this. I have an idea of having selected Labels flag and showLabels flag but we need to loop it for every row and in real time application i can have more than 100 rows and dont want to loop 100 times for every row. Please help.

| A ^ | |删除按钮|

| A ^ | | Delete Button |

|乙^ | |删除按钮|

| B ^ | | Delete Button |

在第一个下拉列表值应该是A，C，D，E，F，G，H
在第二个下拉值应为B，C，D，E，F，G，H

In First dropdown values should be "A, C,D,E,F,G,H" In Second dropdown values should be "B, C,D,E,F,G,H"

当我们添加一行，我们得到一个新的行和下拉应包括C，D，E，F，G，H

When we add a row we get a new row and the drop down should contain "C,D,E,F,G,H"

推荐答案

您可以做到这一点很容易地使用 lodash 库操纵数组和集合。

You could do it easily using the lodash library to manipulate arrays and collections.

修改-1：我添加了一个替代，并相应修改了plunker

EDIT-1: I added an alternative and modified the plunker accordingly.

修改-2：我使用自定义过滤器添加了其他替代

EDIT-2: I added an other alternative using a custom filter

DEMO： http://plnkr.co/编辑/ Sf3el0FyUptWq28XqZnI？p = preVIEW

假设你有一定的行数（名单）每一个都具有下拉列表（选择）。下拉必须有所有还没有被选择的值（剩余）。

Let's say that you have a certain number of rows (list) each having a dropdown (select). The dropdown must have all the values that were not selected yet (remaining).

HTML

<ul>
    <li ng-repeat="item in list">
      {{item.id}}-{{item.value}}
      <select ng-model="item.value" ng-options="letter for letter in remaining"></select>
    </li>
</ul>

每当列表的项目改变下拉值，其余的值将被更新。

Whenever a item of the list change the dropdown value, the remaining values are updated.

JS

$scope.$watch('list', function(newval) {
    $scope.remaining = _.difference($scope.letters, _.map(newval, 'value'));
}, true);

值的可能列表：

$scope.letters = [
    'A','B','C','D','E','F','G','H','I','J'
]

中的项目清单：

$scope.list = [
    {id:1,value:''},
    {id:2,value:''},
    {id:3,value:''},
    {id:4,value:''},
    {id:5,value:''},
    {id:6,value:''},
    {id:7,value:''},
    {id:8,value:''}
];

lodash

我们使用lodash轻松列表中的所有项目_。图的值属性到一个数组。我们希望在 _。区别选定的和可能的值之间。

We use lodash to easily _.map the value property of all the items in the list to an array. And we want the _.difference between the selected and the possible values.

替代跟踪previous值

如果您的可能值的列表psented作为一个字符串（ $ scope.letters ='ABCDEFGHIJ'; ）再$ P $，那么你可以跟踪的剩下的值作为一个字符串太（ $ scope.remaining ='BDEGHJ'; ）。然后，而不是 $腕表 ING每一个变化，您可以使用下拉式菜单中 NG-变化指令，以及添加或用一个简单的与string.replace 删除值。你需要跟踪$ P $的pviously选定的值，以将它们放回名单在切换时。

If your list of possible values is represented as a string ($scope.letters='ABCDEFGHIJ';), then you can keep track of the remaining values as a string too ($scope.remaining='BDEGHJ';). Then, instead of $watching every changes, you can use the ng-change directive on the dropdowns and add or remove the values with a simple string.replace. You need to keep track of the previously selected values in order to put them back in the list when they are switched.

HTML

<ul>
    <li ng-repeat="item in list2">
        {{item.id}}-{{item.value}}
        <select ng-model="item.value" ng-change="select(item)" ng-options="letter for letter in remaining2"></select>
    </li>
</ul>

JS

var last = [];
$scope.select = function(item) {
    $scope.remaining2 = $scope.remaining2.replace(item.value,last[item.id]||'');
    last[item.id] = item.value;
}

在这里我使用了 item.id 来跟踪每个项目的previous价值，但你能想到的另一种方法。

Here I use the item.id to keep track of the previous value of each items, but you could think of another approach.

使用过滤器的替代

的这尚未经过测试，但它应该工作。的

有很多其他的方式来实现这一点，例如，使用所有可能的值的列表上的自定义$过滤器（过滤器将需要访问到当前选定的值）。这可能是我的解决方案中的一个简单的包装。

There are a lot of other ways to achieve this, for example, using a custom $filter on the list of all possible values (the filter would need access to the currently selected values). It could be a simple wrapper of one of my solutions.

HTML

<select ng-model="item.value" ng-options="letter for letter in letters | notselected:list:'value'"></select>

这将作为输入 $ scope.letters 和删除 $ scope.list 使用的。我们必须知道哪些属性对应所选值集合中的过滤器。

This will take as input the $scope.letters and remove the ones used in $scope.list. We must tell the filter which property correspond to the selected values in the collection.

JS

app.filter('notselected', function() {
    return function(input, list, prop) {
        return _.difference(input, _.map(list, prop));
    }
});

这可能是在我看来，最优雅的解决方案。 Lodash是一个了不起的图书馆和工作方式和角度！

This might be the most elegant solution in my opinion. Lodash is an amazing library and works like a charm with Angular!

这篇关于在多行下拉列表过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！