AngularJS过滤复选框选项

Question

我想过滤我的结果。

有一个可以上传的文件列表，每个文件旁边都有一个受益人选择选项，我的愿望是当选中1个复选框时，所选的一个不应该显示在接下来的两个字段中而剩下的未选中一个人将被展示在他们身上。 Click here for image

我是AngularJS的新手，所以这是我的代码：

;(function () {
  'use strict'
angular
    .module('app.user', [])
    .controller('UserController', UserController)
    .filter('trusteefilter', function($filter){
      return function(list, arrayFilter, element){
          if(arrayFilter){
              return $filter("filter")(list, function(listItem){
                  return arrayFilter.indexOf(listItem[element]) === -1;
              });
          }
      };
    })
    .constant('config', {  
      Beneficiary1: 'Beneficiary1',  
     Beneficiary2: 'Beneficiary2',  
     Beneficiary3: 'Beneficiary3',   
      })

<!--Beneficiary1-->
  <td>                                
    <div class="btn-group" ng-init="getSelectedBeneficiary(value,null,null)">
      <button type="button" class="multiselect form-control dropdown-toggle btn btn-custom"
        data-toggle="dropdown" title="Columns">
        {{selectedBeneficiary[$index].Beneficiary1}}                                      
        <b class="caret"></b>
      </button>      
      <ul class="dropdown-menu">                                     
        <li ng-repeat="contact in value.Beneficiary1" id="item">                                 
          <label class="checkbox"
            ng-repeat="test in personalDetails | filter : {'_id':contact.contactId}">                         <input type="checkbox" ng-checked="contact.id" ng-model="confirmed"
              ng-click="change(value,key,test,$event,'Beneficiary1')" id="ng-change-example1">
              {{test.firstName}}
            </input>
          </label>
        </li>         
        <li ng-repeat='item in personalDetails | trusteefilter:getmytrusteeIds(value.Beneficiary1):"_id"' id="item"> 
          <label class="checkbox" ng-show="item._id">
            <input type="checkbox" ng-model="confirmed" 
              ng-click="change(value,key,item,$event,'Beneficiary1')"
              id="ng-change-example1">
              {{item.firstName}}
            </input>
          </label>
        </li>
      </ul>    
    </div>
  </td>
  <!--Beneficiary2-->                            
  <td>
    <div class="btn-group" ng-init="getMySelectedTrustees2(value,null,null)">
      <button type="button" class="multiselect form-control  dropdown-toggle btn btn-custom"
        data-toggle="dropdown" title="Columns">
        {{selectedBeneficiary[$index].Beneficiary2}}
        <b class="caret"></b>
      </button>      
      <ul class="dropdown-menu" >
        <li ng-repeat="contact in value.Beneficiary2" id="item">                                 
          <label class="checkbox"
            ng-repeat="test in personalDetails | filter : {'_id':contact.contactId}">
            <!--{{document.getElementById("ng-change-example").checked = contact.status;}}-->
            <input type="checkbox" ng-checked="contact.id" ng-model="confirmed"
              ng-click="change(value,key,test,$event,'Beneficiary2')" id="ng-change-example1">
              {{test.firstName}}
            </input>
          </label>
        </li>         
        <li ng-repeat='contact in personalDetails | trusteefilter:getmytrusteeIds(value.Beneficiary2):"_id"' id="item">                                         <label class="checkbox" ng-show="contact._id">
            <input type="checkbox" ng-model="confirmed" 
              ng-click="change(value,key,contact,$event,'Beneficiary2')"
              id="ng-change-example1">
              {{contact.firstName}}
            </input>
          </label>
        </li>         
      </ul>
    </div>
  </td>
  <!--Beneficiary3-->
  <td>
    <div class="btn-group" ng-init="getMySelectedTrustees3(value,null,null)">
      <button type="button" class="multiselect form-control dropdown-toggle btn btn-custom"
        data-toggle="dropdown" title="Columns">
        {{selectedBeneficiary[$index].Beneficiary3}}
        <b class="caret"></b>
      </button>      
      <ul class="dropdown-menu">
        <li ng-repeat="contact in value.Beneficiary3" id="item">                                 
          <label class="checkbox"
            ng-repeat="test in personalDetails | filter : {'_id':contact.contactId}" >
            <!--{{document.getElementById("ng-change-example").checked = contact.status;}}-->
            <input type="checkbox" ng-checked="contact.id" ng-model="confirmed"
              ng-click="change(value,key,test,$event,'Beneficiary3')"
              id="ng-change-example1">
              {{test.firstName}}
            </input>
          </label>
        </li>         
        <li ng-repeat='contact in personalDetails | trusteefilter:getmytrusteeIds(value.Beneficiary3):"_id"' id="item">                                         <label class="checkbox" ng-show="contact._id">
            <input type="checkbox" ng-model="confirmed" 
              ng-click="change(value,key,contact,$event,'Beneficiary3')"
              id="ng-change-example1">
              {{contact.firstName}}
            </input>
          </label>
        </li>         
      </ul>
    </div>