Question

我正在使用一个文本框，用户可以在其中输入任何文本。基于这样，一旦输入/删除文本，就会过滤下面列表中的项目......

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

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

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

如果是，那么请指导我。

下面是代码段：

＆＃13;

$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 = [];
          }
  };

＆＃13;

<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>

＆＃13;

希望代码足够可读。

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

在我的角度控制器

1 个答案: