Angularjs мгновенный поиск не работает, как предполагается

Question

Я пытаюсь закодировать простую форму мгновенного поиска Angularjs. Вот немного кода, с которым я работаю:

<script language="javascript"> 
 

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

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

 
\t \t // Paste the clicked value into the search box 
 
\t \t $scope.showResults = function(e) 
 
\t \t { 
 
\t \t \t e.stopPropagation(); 
 
\t \t \t $scope.show_results = true; 
 
\t \t } 
 
\t } 
 
\t </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)"> 
 
\t <div ng-show="show_results"> 
 
\t <ul> 
 
\t \t <li ng-repeat="i in items | searchFor:searchString"> 
 
\t \t \t <div ng-click="pasteValue(i.ip)">{{i.ip}}</div> 
 
\t \t </li> 
 
\t </ul> 
 
\t </div> 
 
</label>

мои проблемы:

1. Когда результат поиска из тега «LI» нажата, это должен быть вставлен в окно поиска (это работает), и все результаты поиска (весь «DIV» с «UL») должны скрываться (это не работает).

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