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为假。

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

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

1 个答案: