使用手表 Angularjs 隐藏自动完成项

Question

我正在尝试使用 $scope.watch 进行自动完成，它运行良好，但是当我选择一个选项时，在项目中单击时，它会输入输入，但项目不会隐藏，因为当我输入时它在输入中再次激活手表...

当我选择其中一项时，我不知道如何隐藏这些项目。

任何帮助..

<input type="text" ng-model="selected" />
<ul class="listFavoInbox">
    <li ng-repeat="favo in resultAuto" ng-click="itemFavoInbox(favo.first,favo.id)">
        {{favo.first}}
    </li>
</ul>

$scope.selected = "";
$scope.arrayFavo = [
    {'id': 1, 'first': 'John', 'last': 'Depp', 'age':52, 'gender':'male'}, 
    {'id': 2, 'first': 'Sally', 'last': 'JoHanson', 'age':13, 'gender':'female'},
    {'id': 3, 'first': 'Taylor', 'last': 'Swift', 'age':22, 'gender':'female'},
];

$scope.$watch('selected', function() {
    $scope.resultAuto = [];
    for(var i=0; i<$scope.arrayFavo.length; i++){

        var text = angular.lowercase($scope.arrayFavo[i].first);
        var search = angular.lowercase($scope.selected);

        // console.log("text array",text);
        // console.log("text",$scope.selected);

        if ( search != "" ){
            if ( text.indexOf(search) !== -1 ){
                $scope.resultAuto.push($scope.arrayFavo[i]);
            }

            console.log($scope.resultAuto);
        }
    }
});

$scope.itemFavoInbox = function (name,id){
    $scope.selected = name;
    $scope.resultAuto = "";
}

Answer 1

你可以使用 ng-hide =true; 当点击 itemFavoInbox(); 当观察者行动时为假

Answer 2

您不需要$watch()。使用filter

<input type="text" ng-model="selected" />
<ul class="listFavoInbox">
    <li ng-repeat="favo in arrayFavo | filter:selected" ng-click="itemFavoInbox(favo.first,favo.id)">
        {{favo.first}}
    </li>
</ul>

或filter:{first: selected} 选择字段；

Fiddle;