Question

我有6个选择列表作为我拥有的选项数量，每个都有6个选项，当我选择一个选项时，部分列表的其余部分不得再包含所选项

HTML

  <div ng-repeat="filter in filters">
 <select ng-model="selected" ng-options="item as item.type for item in filters|filterFnt:selected" ng-click="addProperty(selected)"></select>

JS

$scope.selectionList  = [] ;
$scope.selected       = $scope.filters[0];


    $scope.addProperty  = function (obj) {
         var index = $scope.selectionList.indexOf(obj);
         if( index == -1) {
             $scope.selectionList.push(obj);
         }
    };
$scope.filters      = [
        {
            type : 'select one',
            inputType : '111',
        },
        {
            type : 'A',
            inputType : '111',
        },
        {
            type: 'B',
            Xtype : '222'
        },
        {
            type: 'C',
            Xtype: '444' ,
      },
        {
            type: 'D',
            Xtype : '555'

        },
        {
            type: 'E',
            Xtype : '6666'

        }, 
        {
            type: 'F',
            inputType : '777'

        }

    ];    



app.filter('filterFnt', function() {

          return function(input,x) {
            angular.forEach($scope.selectionList, function(item) {
                var index = input.indexOf(item);
                   if( index != -1 && item != x) {
                     input.splice(index, 1);     
                }
            });
            return input

          };
      });

问题

当我从选择列表中选择一个选项时，我希望将该选项保留在列表中，发生了什么事情，它也会从当前选项中删除

谢谢

Answer 1

问题在splice函数内部过滤器：它函数更改源数组，因此每个过滤器都会更改所有选择的数据。
相反splice您可以使用简单的filter函数。

您的过滤器可能就像

app.filter('filterFnt', function() {
  return function(input, selectionList, selectionObj, filterType) {
    //get elements that selected in current select, or not already selected
    return input.filter(function(el) {
      return selectionObj[filterType] === el || (selectionList.indexOf(el) == -1);
    });
  };
});

我添加 selectionObj ，此对象包含当前选择的所选项目。

在 selectionList 中添加元素之前，您需要从当前选择中删除已添加的项目，如

function removeFromSelected(currType){
    var o = $scope.selectionObj[currType],
        index = $scope.selectionList.indexOf(o);

    if (index != -1)
      $scope.selectionList.splice(index, 1);
}

＆＃13;

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {

  function removeFromSelected(currType){
      var o = $scope.selectionObj[currType],
          index = $scope.selectionList.indexOf(o);
    
      if (index != -1)
        $scope.selectionList.splice(index, 1);
  }
  $scope.addProperty = function(obj, currType) {
    removeFromSelected(currType);
    if (!obj) {
      delete $scope.selectionObj[currType];
    } else {
      var index = $scope.selectionList.indexOf(obj);
      
      $scope.selectionList.push(obj);
      $scope.selectionObj[currType] = obj;
    }

  };

  $scope.filters = [{
    type: 'A',
    inputType: '111',
  }, {
    type: 'B',
    Xtype: '222'
  }, {
    type: 'C',
    Xtype: '444',
  }, {
    type: 'D',
    Xtype: '555'
  }, {
    type: 'E',
    Xtype: '6666'
  }, {
    type: 'F',
    inputType: '777'
  }];
  $scope.selectionList = [];
  $scope.selectionObj = {};
});

app.filter('filterFnt', function() {

  return function(input, selectionList, selectionObj, filterType) {
    return input.filter(function(el) {
      return selectionObj[filterType] === el || (selectionList.indexOf(el) == -1);
    });
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="filter in filters">
    <select ng-model="selected" ng-options="item as item.type for item in filters|filterFnt:selectionList:selectionObj:filter.type" ng-change="addProperty(selected,filter.type)">
      <option value="">select one</option>
    </select>
  </div>
  selectionList - {{selectionList}}
</div>

＆＃13;

angularjs自定义过滤器与选择列表

1 个答案: