您好,我对 AngularJs 比较陌生。我了解基础知识和要点。但是我正在尝试为我的网站实现搜索功能。它有效......但不是我想要的方式。
目前...有一个搜索框,其下方显示有数据...甚至在我输入数据之前。当我在搜索框中键入内容时...它缩小到合适的名称。很标准的东西。它与这个 jsfiddle 非常相似:example jsfiddle
<body ng-app="personApp">
<div class="container">
<header></header>
<div ng-controller="PersonListCtrl">
<div class="bar">Search:
<input ng-model="query">
</div>
<ul class="">
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>
和
var personApp = angular.module('personApp', []);
personApp.controller('PersonListCtrl', function ($scope, $http) {
$http.get('data/persons.json').success(function (data) {
$scope.persons = data;
});
$scope.persons = [{
"name": "Mike Doe"
}, {
"name": "Jhon Doe"
}, {
"name": "Sam Doe"
}, {
"name": "Sam Doe"
}, ];
});
我不希望这样的事情发生。默认情况下,它已经在搜索 json 文件。我不希望任何名称可见,直到我输入一个关键字并且它显示与该关键字匹配的所需信息。
是否可以在保持相同功能的同时防止这种情况发生?
最佳答案
如果您希望在没有搜索内容时隐藏人员列表,那么只需在人员列表上使用 ng-show
。
像这样:
<ul class="" ng-show="query">
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>
只有当 query
为真时,才会显示列表。 query
为空时为 false。
更新 fiddle - http://jsfiddle.net/rCrGP/23/
关于javascript - AngularJS 搜索延迟,直到用户输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28432056/