javascript - AngularJS 搜索延迟,直到用户输入字段

标签 javascript html angularjs search angularjs-ng-repeat

您好,我对 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/

相关文章:

javascript - 检查 HTML 元素是否为 HTML 媒体元素

java - 正确从隐藏类型获取值的方法

html - 使用滚动条正确扩展元素以适应子内容宽度

javascript - WordPress JSON API - 请求 header 错误

jquery - AngularJS 不使用 jQuery 实现元素的 before 方法

javascript - Backbone View el 作为表列

javascript - jQuery - 单击 X,获取名称,然后使用它来显示相关元素

javascript - 如何在 sweet alert 中将选中的复选框属性更改为 true 或 false

angularjs - 如何在Linux终端中运行多个命令

javascript - 数组 javascript indexOf