<!DOCTYPE html>
<html ng-app="maddyApp">
<head>
<!--load bootstrap for styling -->
<link data-require="bootstrap-css@3.1.0" data-semver="3.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" />
<!-- load angular.js -->
<script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<!-- in the script.js our all angular code -->
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-controller="SearchingCtrl">
<div class="jumbotron">
<img src="http://tech-blog.maddyzone.com/uploads/2013/10/maddyzone-logo-300x72.png">
<br/>
<h1>Basic Searching With a specific attribute in AngularJS</h1>
<br/>
</div>
<form>
<label>Search With Category Name</label>
<input type="text" ng-model="search" Placeholder ="write category name" />
</form>
<table class="table">
<thead>
<tr>
<th colspan=3 align="center">
Search With Category <i>"{{search }}"</i>
</th>
</tr>
<tr>
<th>
S.N.
</th>
<th>
Title (click on link to view)
</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in articleList | filter:{category:search}">
<td>
{{$index + 1}}
</td>
<td>
<a ng-href="value.link" target="_blanck">{{ value.title }}</a>
</td>
<td>
<label class="label label-info">{{value.category }}</label>
</td>
</tr>
<tr ng-show="(articleList | filter:{category:search}).length == 0">
<td colspan="3">
<p>oops ! No Article found with this Category search</p>
</td>
</tr>
</tbody>
</table>
</div>
See Full Article at <a href="http://tech-blog.maddyzone.com/angularjs/basic-searching-in-angularjs">Basic searching in AngularJS</a>
</body>
</html>
// Code goes here
var maddyApp= angular.module("maddyApp",[]);
maddyApp.controller('SearchingCtrl',['$scope',function($scope){
// here we set some article data with title ,link and category of Maddyzone site :)
$scope.articleList=[
{
'title':'conditionally apply classes in angularjs',
'link':'http://tech-blog.maddyzone.com/javascript/conditionally-apply-classes-in-angularjs',
'category':'Angular'
},{
'title':'Dynamic routing with AngularJS',
'link':'http://tech-blog.maddyzone.com/javascript/dynamic-routing-angularjs',
'category':'Angular'
},{
'title':'How to use multiple ng-view in a single page',
'link':'http://tech-blog.maddyzone.com/javascript/use-multiple-ng-view-single-page',
'category':'Angular'
},{
'title':'How to Setup Node.js on Amazon EC2',
'link':'http://tech-blog.maddyzone.com/resources/how-to-setup-node-js-amazon-ec2',
'category':'Node'
},{
'title':'How to add Google search in our website',
'link':'http://tech-blog.maddyzone.com/resources/add-google-search-website',
'category':'Google'
}
];
}]);
/* Styles go here */
Basic Searching With a specific attribute in AngularJS