Question

我正在尝试使用链接实现自动完成搜索（选择后应跳转到特定页面）。只有我需要隐藏搜索框下方出现的数据，它才会显示用户启动类型，如搜索功能。

下面有两个屏幕截图，第一个是我已经完成的数据默认填充，所以我希望这是隐藏的，当我键入它应该显示像screen2

<!DOCTYPE html>
<html>
<head>
<title>Angular JS</title>

<style>
ul,li{margin:0; padding:0;}
</style>
</head>
<body>    
<div ng-app="myApp" ng-controller="movieCtrl"> 
<input type="text" ng-model="film">
<ul>
  <li ng-repeat="x in movies | filter:film | orderBy:'film'" style="list-style-type:none;"><a href="{{ x.param }}">{{ x.film  | uppercase }}</a></li>
</ul>

</div>    

<script src="Scripts/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('movieCtrl', function($scope, $http) {
    $http.get("tmp.php")
    .success(function(response) {$scope.movies = response.movie;});
});
</script>
</body>
</html>

Answer 1

在列表中添加一个条件，只有在过滤器不为空时才可见：

<ul ng-show="film">
  <li ng-repeat="x in movies | filter:film | orderBy:'film'" style="list-style-type:none;"><a href="{{ x.param }}">{{ x.film  | uppercase }}</a></li>
</ul>

Answer 2

添加变量（最初为false）并根据该变量隐藏列表。然后，当您更改输入时，将变量更改为true。这是你能做的：

<button>

和

<input type="text" ng-model="film" ng-init="show=0" ng-change="show=1">

Angular js使用链接自动完成搜索

2 个答案: