angularjs - Angularjs 即时搜索无法正常工作

Question

我正在尝试编写一个简单的 Angularjs 即时搜索表单。这是我使用的一些代码：

<script language="javascript">

	// The controller for instant search with Angular
	function InstantSearchController($scope)
	 {
		$scope.items = [{ip:'144.76.24.100'},{ip:'176.9.56.120'},{ip:'178.63.240.111'};
		$scope.qq = '';
		$scope.show_results = false;

		// Paste the clicked value into the search box
		$scope.pasteValue = function(val)
		 {
			$scope.qq = val;
			document.getElementById('q').value = val;
			$scope.show_results = false; 
		 }

		// Paste the clicked value into the search box
		$scope.showResults = function(e)
		 {
			e.stopPropagation();
			$scope.show_results = true;
		 }
	 }
	</script>


<label>Search for <input type="text" name="q" id="q" ng-value="{{qq}}" value="{{qq}}" size="23" ng-model="searchString" ng-click="showResults($event)">
	<div ng-show="show_results">
	<ul>
		<li ng-repeat="i in items | searchFor:searchString">
			<div ng-click="pasteValue(i.ip)">{{i.ip}}</div>
		</li>
	</ul>
	</div>
</label>

我的问题是：

1. 单击“LI”标签的搜索结果时，必须将其粘贴到搜索框中（有效），并且所有搜索结果（带有“UL”的整个“DIV”）必须隐藏（无效）。

2. 目前搜索框的值是用“document.getElementById('q').value = val;”设置的 线。我添加了这一行，因为前一行“$scope.qq = val;” 不适用于这段代码。我相信 Angularjs 有一些方法来设置值。

谢谢你。

Answer 1

您的pasteValue函数不应该设置input使用 JavaScript 的值，这会扰乱摘要循环并且绑定不会更新，您应该指向$scope.

// Paste the clicked value into the search box
$scope.pasteValue = function(val)
{
    $scope.searchString = val; //will update filter
    $scope.show_results = false; 
}