如何应用带过滤器的ng if来过滤记录，并在同一页面中显示两个不同的视图

How to apply ng-if with filter for filtering records and present two different views in the same page?

本文关键字：一页 显示 视图 两个 记录 应用 何应用 过滤器 ng 过滤 if      更新时间：2023-09-26

我是AngularJS的新手，正在从这里学习，但我一直在做下面的实验。

我有以下数据：

var people = ([
    {
    id: 1,
    name: "Peter",
    age: 21},
{
    id: 2,
    name: "David",
    age: 10},
{
    id: 3,
    name: "Anil",
    age: 22}
    ]);

我想做的是，如果年龄大于20，那么我必须显示所有三个字段（即id、姓名、年龄）

ID    Name  Age
1     Peter  21
3     Anil   22

如果年龄小于20，，则只会出现2个字段（例如id、name）

ID    Name  
2     David

到目前为止我尝试了什么

app.js

var myApp=angular.module('myApp', []);
myApp.controller('PeopleCtrl', function($scope,$window) {
    $scope.people = ([
    {
    id: 1,
    name: "Peter",
    age: 21},
{
    id: 2,
    name: "David",
    age: 20},
{
    id: 3,
    name: "Anil",
    age: 22}
    ])  
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>   
    <script src="app.js"></script>
  </head>
  <body>
        <div ng-app="myApp" ng-controller="PeopleCtrl">
                <table  border="1" >
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Age</th>        
                    </tr>
                    <tr ng-repeat="person in people" >
                        <td><span>{{person.id}}</span></td>
                        <td><span>{{person.name}}</span></td>
                        <td><span>{{person.age}}</span></td>       
                    </tr>
                </table>
        </div>
  </body>
</html>

我在网上学习了一些教程，发现了ng-if-的概念，这将有助于与过滤器一起做到这一点。（我想是的……如果我走错了方向，请纠正我）

但我不能把它放在应用程序中。

此外，我想显示同一页面中的记录（即index.html）

为此寻求帮助。

Plunker:http://plnkr.co/edit/hLaw38fCMaclrHiaCH3X?p=preview

如下所示。

标记

<tr ng-repeat="person in people| filter: search">
    <td><span>{{person.id}}</span></td>
    <td><span>{{person.name}}</span></td>
    <td ng-if="person.age<20"><span>{{person.age}}</span></td>
</tr>

工作Plunkr

编辑1

你将需要创建额外的过滤器，这将给你的过滤器内容有20人以下或没有。

标记

<table border="1">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th ng-if="(people| filter: search| filter: underTwenty: 20).length > 1">Age</th>
    </tr>
    <tr ng-repeat="person in people| filter: search">
        <td><span>{{person.id}}</span></td>
        <td><span>{{person.name}}</span></td>
        <td ng-if="person.age<20"><span>{{person.age}}</span></td>
    </tr>
</table>

过滤器

myApp.filter('underTwenty', function() {
    return function(values, limit) {
        var returnValue = [];
        angular.forEach(values, function(val, ind) {
            if (val.age < limit) returnValue.push(val);
        });
        return returnValue
    }
});

更新的Plunkr

编辑2

根据OP 要求的变更

HTML

<table border="1" ng-init="ageToShow=(people| underTwenty: 20).length >= 1">
  <tr>{{ageToShow}}
    <th>Id</th>
    <th>Name</th>
    <th ng-if="!ageToShow">Age</th>
  </tr>
  <tr ng-repeat="person in people| filter: search">
    <td><span>{{person.id}}</span>
    </td>
    <td><span>{{person.name}}</span>
    </td>
    <td ng-if="!ageToShow"><span>{{person.age}}</span>
    </td>
  </tr>
</table>

Plunkr

相关文章：