2个多选和单选项列表

时间:2015-10-20 12:07:22

标签: javascript arrays angularjs multi-select

我有2个多选元素,并且都从变量列表中获取选项。 如果选择作为行变量的变量,它将不会显示在列选择选项中。如果用户取消选择选项,则变量应显示在两个列表中

$scope.variables = ['a','b','c','d','e','f'];

<select multiple ng-model="selectedAsRows" ng-options="v for v in variables"></select>
<select multiple ng-model="selectedAsCols" ng-options="v for v in variables"></select>

1 个答案:

答案 0 :(得分:2)

我认为我理解你想要的东西。这是一个小例子:

http://jsfiddle.net/26fZb/209/

关键是要使用像这样的自定义过滤器:

filter: { name: '!' + selectedAsFriend.name }

修改

以下是multiSelect的情况。我创建了自定义过滤器。

app.filter('myFilter', function() {
  return function(inputList, list) {
     return inputList.filter(isAlreadySelected(list));
};

  function isAlreadySelected(list){
    return function(elem){
      if (list.indexOf(elem) == -1) 
        return true;
      else
        return false;
    }
  }

});

然后在html文件中使用它:

<select multiple ng-model="selectedAsRows" ng-options="v for v in variables | myFilter: selectedAsCols"></select>
<select multiple   ng-model="selectedAsCols" ng-options="v for v in variables | myFilter: selectedAsRows"></select>

看看完整的代码:

http://plnkr.co/edit/6eWZB75dAdquPD1jMmb7?p=preview