Menu
I am pretty new to AngularJS and is learning that from here, but am stuck with the below experiment of mine.
I have the below 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 that, if the age is greater than 20, then I have to display all the three fields (i.e. 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 I have 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="[email protected]" 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 was going through some tutorials in the net and came upon the concept of ng-if that will help to do this along with filter. (I think so.. correct me if I am in the wrong direction)
But I cannot just fit this into the application.
Also, I want to show the records in the same page(i.e. index.html)
Seeking help for that.
Plunker: http://plnkr.co/edit/hLaw38fCMaclrHiaCH3X?p=preview
382
It will look like below.
Markup
<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
Edit 1
You will need to create extra filter which will give you the filter content has under 20 person or not.
Markup
<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>
Filter
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
Edit 2
As per requested changes by 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
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
