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

Question

您好，我是 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 文件。我不希望任何名称可见直到我输入一个关键字，它显示与该关键字匹配的所需信息。

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

Answer 1

如果您想在没有任何搜索内容时隐藏人员列表，那么只需在人员列表中使用 ng-show。

像这样：

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

这将仅在 query 为真时显示列表。 query 为空时为假。

已更新 Fiddle - http://jsfiddle.net/rCrGP/23/

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

AngularJS Search delay until user enters field

html

javascript

search

angularjs

angularjs-ng-repeat