使用HTML定義的過濾器，在我的角度控制器

我使用一個文本框，其中用戶可以輸入任何文字。基礎上，在下面顯示的列表中的項目，只要文本鍵入/刪除過濾...使用HTML定義的過濾器，在我的角度控制器

選擇所有（送大家有）從mainlist刪除的項目，並添加這些元素選擇列表...

的一切工作正常。我想，只有那些過濾應該被移動從一個列表到另一個信息...（全部選擇，所有的項目都轉移！）

我可以通過相同的文本（由用戶輸入），並把它作爲一個過濾器在我的名單裏面的角度控制器？

如果是的話，指導我如何。下面

是代碼段：

$scope.transferList = function (x) { 
 
\t \t if (x === "selectAllServers") { 
 
\t \t \t for (i = 0; i < $scope.lists.serversList.servers.length; i++) { 
 
\t \t \t \t $scope.lists.selectedServersList.servers.push( $scope.lists.serversList.servers[ i ]); 
 
\t \t \t } 
 
\t \t \t $scope.lists.serversList.servers = []; 
 
      } 
 
    };

<div class="text-center"> 
 
\t \t <h3>Select Servers</h3> 
 
\t </div> 
 
\t <div class="container col-md-4 col-md-offset-1"> 
 
\t \t <form> 
 
\t \t <div class="form-group"> 
 
     \t \t \t <div class="input-group style='width: 100%'"> 
 
     \t \t \t <div class="input-group-addon"><i class="glyphicon glyphicon-filter"></i></div> 
 
     \t \t \t <input type="text" class="form-control" placeholder="Enter text to filter servers..." ng-model="searchTerm"> 
 
     \t \t \t </div>  
 
    \t \t </div> 
 
\t \t </form> 
 
\t </div> 
 
\t <div class="row"> 
 
\t \t <div class="box col-md-4 col-md-offset-1"> 
 
\t \t \t <ul dnd-list="lists.serversList.servers" 
 
\t \t \t \t dnd-allowed-types="lists.serversList.allowedTypes"> 
 
\t \t \t \t <li class="text-center">Servers Available</li> 
 
\t \t \t \t <li ng-repeat="server in lists.serversList.servers|filter:searchTerm" 
 
\t \t \t \t \t dnd-draggable="server" dnd-type="server.type" 
 
\t \t \t \t \t dnd-disable-if="server.type == 'unknown'" 
 
\t \t \t \t \t dnd-moved="lists.serversList.servers.splice($index, 1)" 
 
\t \t \t \t \t dnd-effect-allowed="move" class="background-unselected" 
 
\t \t \t \t \t class="searchable"> 
 
\t \t \t \t \t <div class="handle"> 
 
\t \t \t \t \t \t <i class="glyphicon glyphicon-chevron-right" 
 
\t \t \t \t \t \t \t ng-click="selectItem('server',$index)"></i> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="name">{{server.name}}</div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="dndPlaceholder">Drop <strong>server</strong> here 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t \t <div class="box col-md-4 col-md-offset-2"> 
 
\t \t \t <ul dnd-list="lists.selectedServersList.servers" 
 
\t \t \t \t dnd-allowed-types="lists.selectedServersList.allowedTypes"> 
 
\t \t \t \t <li class="text-center">Servers Selected</li> 
 
\t \t \t \t <li ng-repeat="server in lists.selectedServersList.servers" 
 
\t \t \t \t \t dnd-draggable="server" dnd-type="server.type" 
 
\t \t \t \t \t dnd-disable-if="server.type == 'unknown'" 
 
\t \t \t \t \t dnd-moved="lists.selectedServersList.servers.splice($index, 1)" 
 
\t \t \t \t \t dnd-effect-allowed="move" class="background-selected"> 
 
\t \t \t \t \t <div class="handle"> 
 
\t \t \t \t \t \t <i class="glyphicon glyphicon-chevron-left" 
 
\t \t \t \t \t \t \t ng-click="removeItem('server',$index)"></i> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="name">{{server.name}}</div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="dndPlaceholder">Drop <strong>server</strong> here 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
\t <br /> 
 
\t <div class="row"> 
 
\t \t <div class="col-md-4 col-md-offset-1"> 
 
\t \t \t <button class="btn btn-default btn-block" 
 
\t \t \t \t ng-click="transferList('selectAllServers')"> 
 
\t \t \t \t Send Everyone there <i class="glyphicon glyphicon-arrow-right"></i> 
 
\t \t \t </button> 
 
\t \t </div> 
 
\t \t <div class="col-md-4 col-md-offset-2"> 
 
\t \t \t <button class="btn btn-default btn-block" 
 
\t \t \t \t ng-click="transferList('unSelectAllServers')"> 
 
\t \t \t \t <i class="glyphicon glyphicon-arrow-left"></i> Send Everyone there 
 
\t \t \t </button> 
 
\t \t </div> 
 
\t </div>

希望的代碼是足夠可讀。

來源

2015-11-10 Sachin Sharma

1.You可以啓動相同的過濾器：

$scope.add = function() { 
    var filtered = $filter('filter')($scope.lists.serversList.servers, $scope.searchTerm); 
    // actual add here 
}

你看這裏2.As有一些代碼的重複 - 您使用相同的過濾器的兩倍，因此你可以重寫一下：

<input type="text" class="form-control" placeholder="Enter text to filter servers..." ng-model="searchTerm" ng-change="recalculateFiltered()"> 
<li ng-repeat="server in filteredList" ...

而在控制器：

$scope.recalculateFiltered = function() { 
     $scope.filteredList = $filter('filter')($scope.lists.serversList.servers, $scope.searchTerm); 
}

來源

2015-11-10 11:44:43

謝謝....我正在嘗試這個。還可以我用這個過濾器（SEARCHTERM）太檢索所有除了那些符合篩選條件？ –

['name1'，'name2'，'qwe'] |過濾器：'！name' - > ['qwe'] –

使用HTML定義的過濾器，在我的角度控制器

回答

相關問題