AngularJS搜索延迟，直到用户输入字段

您好，我是AngularJs相对较新。我知道基本知识和要领。不过，我试图为我的网站实施搜索功能。它的工作原理...但不是我喜欢的方式。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文件进行搜索。我不想要任何名字可见，直到我输入关键字并显示与该关键字匹配的所需信息。

是否可以在保持相同功能的同时防止发生这种情况？

来源

2015-02-10 Superunknown

如果您希望隐藏没有任何搜索内容的人员列表，请在人员列表中使用ng-show。

事情是这样的：

<ul class="" ng-show="query"> 
    <li ng-repeat="person in persons | filter:query">{{person.name}}</li>

这将显示列表，只有当query是真实的。当它为空时，query为假。

更新小提琴 - http://jsfiddle.net/rCrGP/23/

来源

2015-02-10 12:54:04 haxtbh

既然你问的延迟，你也可以添加一个'$ timeout'功能 – DonJuwe 2015-02-10 13:09:23

AngularJS搜索延迟，直到用户输入字段

回答

相关问题