Geek Answers Handbook

How to apply ng-if with a filter to filter records and present two different views on the same page?

I am new to AngularJS and find out what is from here , but I am stuck with my experimental experiment.

I have the following data:

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

What I want to do is, if the age is more than 20 , then I need to display all three fields (e.g. id, name, age)

ID    Name  Age
1     Peter  21
3     Anil   22

If the age is less than 20, then only 2 fields will appear (e.g. id, name)

ID    Name  
2     David

What have i tried so far?

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>

I went through some tutorials on the net and came across the ng-if concept , which will help to do this together with the filter . (I think so .. correct me if I'm in the wrong direction)

.

, ( index.html)

.

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

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

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

+6

More articles:


All Articles