如何使用AngularJS过滤器将表搜索结果默认为隐藏？

发布时间：2020-12-17 17:19:23 所属栏目：安全来源：网络整理

导读：在下面的 Angularjs片段中,默认显示整个表,并在开始输入时对其进行过滤. 最佳做法是将其更改为默认情况下不显示结果,并且仅在搜索查询中至少有3个结果匹配后才开始显示结果？奖金问题,如果输入的最少2个字符,您将如何仅显示结果？ HTML： div ng-app="myApp

在下面的 Angularjs片段中,默认显示整个表,并在开始输入时对其进行过滤.

>最佳做法是将其更改为默认情况下不显示结果,并且仅在搜索查询中至少有3个结果匹配后才开始显示结果？
>奖金问题,如果输入的最少2个字符,您将如何仅显示结果？

HTML：

<div ng-app="myApp">
    <div ng-controller="PeopleCtrl">
        <input type="text" ng-model="search.$">
        <table>
            <tr ng-repeat="person in population.sample | filter:search">
                <td>{{person.name}}</td>
                <td>{{person.job}}</td>
            </tr>
        </table>
    </div>
</div>

Main.js：

var myApp = angular.module('myApp',[]);
myApp.factory('Population',function () {
    var Population = {};
    Population.sample = [
        {
            name: "Bob",job: "Truck driver"
        }
        // etc.
    ];
    return Population;
});

function PeopleCtrl($scope,Population) {
    $scope.people = Population;
}

解决方法

您可以在标记中完成所有这些操作,实际上…… here’s a plunk to demonstrate

这是标记的变化：

<input type="text" ng-model="search">
<table ng-show="(filteredData = (population.sample | filter:search)) && filteredData.length >= 3 && search && search.length >= 2">
    <tr ng-repeat="person in filteredData">
        <td>{{person.name}}</td>
        <td>{{person.job}}</td>
    </tr>
</table>

编辑：改变我的回答以反映您的要求.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!