Angular 在 ng-repeat 上的多个选择中过滤掉重复项

Question

我有一个选择框和一个添加按钮，它通过向 ng-repeat 正在使用的对象添加一个空对象来向表单添加另一个选择框。如何动态分配每个选择框可以使用的对象，排除其他选择框正在使用的任何项目？

例如，如果我有一个选择了“分支”的选择框，然后我添加了另一个选择框，我如何从该选择框以及所有未来的选择框中排除“分支”？因此，如果我有 4 个选择框都在选择某些内容，并且我去制作第 5 个选择框，我只想能够选择尚未选择的 1 个项目。

我尝试使用在this 帖子中看到的过滤器，但这并没有真正帮助我。我尝试过使用其他过滤器，但我似乎无法做到这一点。

我有以下 HTML：

<form class="form-inline">
    <div ng-repeat="(key, value) in searchObject">
        <div class="input-group">
            <div class="input-group-addon">Search by</div>
            <select id="searchOption" class="form-control" ng-model="searchObject[key].searchOption" ng-options="searchOptions.Name for searchOptions in searchOptions">
                <option value="" selected disabled>Select an option to search by...</option>
            </select>
            <div class="input-group-btn">
                <button class="btn btn-secondary btn-custom" ng-click="clearSearchOption(searchObject[key])" ng-disabled="!searchObject[key].searchOption">
                    <span class="fa fa-times"></span>
                </button>
            </div>
        </div>
        <div ng-if="searchObject[key].searchOption" class="input-group">
            <div class="input-group-addon">Search for</div>
            <input type="text" class="form-control" ng-model="searchObject[key].searchText" placeholder="Search by {{searchObject[key].searchOption.Name}}..." />
            <div class="input-group-btn">
                <button class="btn btn-secondary btn-custom" ng-click="modifyCriteria($index, $last)">
                    <span class="fa fa-minus"></span>
                </button>
            </div>
        </div>
        <div class="input-group">
            <button ng-if="$last" type="button" class="btn btn-primary" ng-click="searchEmployee(searchObject)" ng-disabled="!searchValid()">Search <i class="fa fa-search"></i></button>
            <div ng-if="$last" class="input-group-btn">
                <button class="btn btn-secondary btn-custom" ng-click="modifyCriteria($index, $last)" ng-disabled="!searchValid()">
                    <span class="fa fa-plus"></span>
                </button>
            </div>
        </div>
        <br/><br/>
    </div>
</form>

使用以下JS：

var app = angular.module('app', [
    'ngAnimate',
    'ngTouch',
    'ngSanitize',
    'ui.bootstrap',
    'ui.bootstrap.modal',
    'angular-loading-bar'
])

app.filter('exclude', function () {
    return function (items, exclude) {
        return items.filter(function (item) {
            return exclude.indexOf(item.ID) == -1;
        })
    }
})

app.controller('appController', function($scope, $http) {   
    $scope.searchOptions = [
        {ID: 1, Name: 'Branch', Show: true},
        {ID: 2, Name: 'BranchArea', Show: true},
        {ID: 3, Name: 'EmployeeType', Show: true},
        {ID: 4, Name: 'LastUpdateDateStart', Show: true},
        {ID: 5, Name: 'LastUpdateDateEnd', Show: true}      
    ]

    $scope.searchObject = [{}]

    $scope.excludedOptions = []

    $scope.modifyCriteria = function (index, last) {
        if (index < $scope.searchOptions.length - 1 && last == true) {
            $scope.searchObject.push({})
        } else {
            $scope.searchObject.splice(index, 1)
        }
    }

    $scope.searchValid = function () {
        for (var i = 0; i < $scope.searchObject.length; i++) {
            if (!$scope.searchObject[i].searchOption || !$scope.searchObject[i].searchText) {
                return false
            }
        }

        return true
    }

    $scope.clearSearchOption = function (searchForm) {
        delete searchForm.searchOption
    }

    function containsId(id) {
        for (var i = 0; i < $scope.searchObject.length; i++) {
            if ($scope.searchObject[i].searchOption.ID == id) {
                return true
            }
        }

        return false
    }
})

Answer 1

因此，对于这个场景似乎可以跨多个选择框工作，拥有一个我们自己的选择框的组件/指令会根据我们的要求运行，这将是有益的。

所以我们需要创建一个指令/组件的第一步是一个选项列表并显示在选择框中。该指令还将处理过滤器以消除从珍贵订单中选择的那些选项

这里是 plunker 链接，它将一起显示所有内容： http://plnkr.co/edit/Zxr17TQXwHpiQUzKAc8f?p=preview

指令：

app.directive('mySelectBox', function($filter) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      optionList:'=',
      allOptions: '=',
      index: '='
    },
    templateUrl:'selectTemplate.html',
    link: function(scope) {
      scope.onChange = function () {
        for(var i=0;i<scope.optionList.length;i++) {
          scope.optionList[i].Show = true;
        }
        scope.person.Show = false;
      };

      scope.getValues = function(val) {
        if(scope.index > 0) {
          var j = scope.index;
          for(var l=j;l>0;l=l-1) {
            var previousVal = $filter('filter')(scope.allOptions[j-1].optionList, {ID:val.ID}, true);
            if(!previousVal[0].Show) {
              return false;
            } else {
              j=j-1;
            }
          }
        }
        return true;
      }
    }
  }
});

现在我们将拥有一个控制器来保存这个和逻辑来克隆并在点击按钮时添加选择框

app.controller('MainCtrl', function($scope) {
  $scope.name = 'Boxes';
  $scope.options=[];
  $scope.optionList = 
      [ {ID: 1, Name: 'Branch', Show: true},
        {ID: 2, Name: 'BranchArea', Show: true},
        {ID: 3, Name: 'EmployeeType', Show: true},
        {ID: 4, Name: 'LastUpdateDateStart', Show: true},
        {ID: 5, Name: 'LastUpdateDateEnd', Show: true}  ];


  $scope.addCount = function() {
    $scope.options.push({optionList:angular.copy($scope.optionList)});
  }

});

现在是模板

指令：

<div>
      Select Box {{index+1}}: <select ng-change="onChange(index)" ng-options='person.Name for person in  optionList | filter:getValues' ng-model='person'><option value="">-- Select one --</option></select> 
      <span style="color:red">{{person.Name}}</span>
    </div>

包含此指令调用的索引 html

<!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>Hello {{name}}</h1>
    <input type="button" ng-click="addCount()"> Click here to add a select box
    <div ng-repeat="count in options">
      <my-select-box data-index="$index" data-all-options="options" data-option-list="count.optionList" ></my-select-box>
    </div>

  </body>

</html>