在我的角度控制器中使用 html 中定义的过滤器

Question

我正在使用一个文本框，用户可以在其中输入任何文本。 基于以下显示的列表中的项目在输入/删除文本后立即被过滤...

全选（将所有人发送到那里）从主列表中删除项目并将这些元素添加到选定列表...

适用于所有人。我希望只有过滤的那些应该从一个列表移动到另一个......（全选时，所有项目都被转移！）

我可以传递相同的文本（由用户输入）并将其用作角度控制器内列表中的过滤器吗？？

如果是，请指导我。

下面是代码段：

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

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

希望代码足够可读。

Answer 1

1.您可以启动相同的过滤器：

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

2.如您所见，这里有一些代码重复 - 您使用了两次相同的过滤器，所以您可以重写一下：

<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);
}