如何应用带过滤器的 ng-if 来过滤记录并在同一页面中呈现两个不同的视图？

Question

我是 AngularJS 的新手，并且正在从 here 那里学习，但是我的以下实验仍然存在。

我有以下数据：

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

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

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 的概念，它将有助于与 filter[=49 一起完成此操作=]. （我也这么认为。。方向不对请指正）

但我不能只将其放入应用程序中。

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

为此寻求帮助。

笨蛋： http://plnkr.co/edit/hLaw38fCMaclrHiaCH3X?p=preview

Answer 1

它将如下所示。

标记

<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>

Working 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
    }
});

Updated 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

如何应用带过滤器的 ng-if 来过滤记录并在同一页面中呈现两个不同的视图？

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

javascript

html-table

angularjs

angularjs-ng-repeat