Question

我正在尝试编写一个简单的Angularjs即时搜索表单。以下是我工作的一些代码：

＆＃13;

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

＆＃13;

我的问题是：

当来自＆＃34; LI＆＃34;的搜索结果时单击标签，必须将其粘贴到搜索框（即工作状态），所有搜索结果（整个＆＃34; DIV＆＃34;＆＃34; UL＆＃34;）必须隐藏（不是＆＃39; ;工作）。
目前搜索框的值设置为＆＃34; document.getElementById（＆＃39; q＆＃39;）。value = val;＆＃34;线。我添加了那行，因为前一个＆＃34; $ scope.qq = val;＆＃34;不适用于这段代码。我相信Angularjs有一些设定价值的方法。

谢谢。

Answer 1

您的pasteValue函数不应使用JavaScript设置input的值，这会破坏摘要周期并且绑定不会更新，您应该指向$scope。

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

Angularjs即时搜索并不像预期的那样工作

1 个答案: