Example I have a students list as below:
$scope.students = [
{ name: 'Hai', age: 25, gender: 'boy' },
{ name: 'Hai', age: 30, gender: 'girl' },
{ name: 'Ho', age: 25, gender: 'boy' },
{ name: 'Hoan', age: 40, gender: 'girl' },
{ name: 'Hieu', age: 25, gender: 'boy' }
];
I want to filter students via gender to be boy and filter by name of them.
The first I create a function named "filterbyboy" as following:
$scope.filterbyboy = function (genderstr) {
if ((typeof $scope.search === 'undefined')||($scope.search === ''))
return (genderstr = "")
else
return (genderstr = "boy");
};
Explaination: if not filter name then display all students else filter by input name and gender as 'boy'
Here is full HTMLcode
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script>
var app = angular.module('MyForm', []);
app.controller('myCtrl', function ($scope) {
$scope.filterbyboy = function (genderstr) {
if ((typeof $scope.search === 'undefined')||($scope.search === ''))
return (genderstr = "")
else
return (genderstr = "boy");
};
$scope.students = [
{ name: 'Hai', age: 25, gender: 'boy' },
{ name: 'Hai', age: 30, gender: 'girl' },
{ name: 'Ho', age: 25, gender: 'boy' },
{ name: 'Hoan', age: 40, gender: 'girl' },
{ name: 'Hieu', age: 25, gender: 'boy' }
];
});
</script>
</head>
<body ng-app="MyForm">
<div ng-controller="myCtrl">
<h3>List students</h3>
<div class="container-fluid">
<pre>Get all students via filter name and to be boy</pre>
<hr />
<table class="table table-striped">
<thead>
<tr>
<th>Edit</th>
<th>
Name
</th>
<th> Age </th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>Filter =>></td>
<td> <input type="text" ng-model="search" /></td>
<td style="width:40px"> </td>
<td> </td>
</tr>
<tr ng-repeat="stud in students | filter:filterbyboy(stud.gender)|filter:search ">
<td>
<button class="btn">
Edit
</button>
</td>
<td>{{ stud.name}}</td>
<td>{{ stud.age}}</td>
<td>{{ stud.gender}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Run it at Plunker via link how to use && operator in AngularJs
PSD to WordPress conversion is one of the most important steps to lay a solid foundation of a professional WordPress powered website. For converting Photoshop to WordPress theme/ template many people hire WordPress developer. In this article, you are going to learn major advantages of a dedicated WordPress developer and some useful tips to keep in mind while hiring WordPress web developer. See more responsive landing page
ReplyDeleteI am very ecstatic when I am reading this blog post because it is written in a good manner and the writing topic for the blog is excellent.
ReplyDeleteThanks for sharing valuable information. Also get to know about PSD To Wordpress Conversion