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搜索延遲，直到用戶輸入字段

回答

相關問題