Table Column Level Filter

Swappy_Gaj
Posted by Swappy_Gaj under AngularJS 1x category on | Points: 40 | Views : 1142
Objective:To apply column level filter

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body ng-controller="ctrl">
<div>
<table border="1">

<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>
<input type="text" ng-model="name" placeholder="Enter Name"></input>
</td>
<td>
<input type="text" ng-model="country" placeholder="Enter country"></input>
</td>
</tr>
<tr ng-repeat="n in collection |filter:name">
<td>{{n.name }}</td>
<td>{{n.country }}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var myapp=angular.module('myapp', []);

myapp.controller('ctrl',function($scope){
$scope.collection = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];

});



</script>


</body>
</html>

Comments or Responses

Login to post response