In this article,
I would like you know you about Search functionality in AngularJS.
In HTML the
alignment of controls is using bootstrap classes.
To start the
AngularJS Application We should first apply the Module Name with ng-app
directive in <html>. The Module Name is from js file which is given name
of the module of the AngularJS application.
And Later add the
angular.min.js file and also for
And Also While we
have to apply controller name after the angular.min.js and bootstrap.css, where
the controller events should effect that may be in the <div> or <body>
By Applying the
Controller name to the ng-controller directive, the events and methods and
scope objects are handled through out the <div> or <body> where
ng-controller directive is given.
In the search
functionality if the data is available, it displays the searchable record, if
the data is not available it display "No record found". For this
scenario, I had used ng-show event for <tr> in <table>.
The HTML Code Is As Below :
index.html
<!DOCTYPE html>
<html ng-app="searchfunctionality">
<head>
<meta charset="utf-8" />
<title>AngularJS
- Search Functionality</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="index.js"></script>
</head>
<body ng-controller="SearchFuncController">
<div class="form-group container">
<div class="row">
<h3>AngularJS
- Search Record From List</h3>
</div>
<div class="row" style="position:relative">
<div class="col-md-3">
<label>Item Code</label>
<input type="text" name="itemcode" class="form-control" id="itemcode" ng-model="searchItemCode" />
</div>
<div class="col-md-3">
<label>Item Name</label>
<input type="text" name="itemname" class="form-control" id="itemname" ng-model="searchItemName" />
</div>
<div class="col-md-3">
<label>Item
Price</label>
<input type="text" name="itemprice" class="form-control" id="itemprice" ng-model="searchItemPrice" />
</div>
<!--Here
I am using style also, because the alignment of button control is displaying
horizontally along with labels of Item Code, Item Name, Item Price,
but what we need is it has to
display along with input text boxes, so applying
style="position:absolute;bottom:0;right:0;", the button controls
display along with textbox controls horizontally-->
<div class="col-md-3" style="position:absolute;bottom:0;right:0;">
<button type="button" name="search" class="btn
btn-primary" id="search" ng-click="SearchItems()">Search</button>
<button type="button" name="clear" class="btn
btn-danger" id="clear" ng-click="ClearTextBoxes()">Clear</button>
</div>
</div>
<div class="row">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Item Code</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tr ng-show="filteredItems.length!=0" ng-repeat="item in filteredItems">
<td>{{ item.ItemCode}}</td>
<td>{{ item.ItemName}}</td>
<td>{{ item.ItemPrice}}</td>
</tr>
<tr ng-show="filteredItems.length==0" style="text-align:center;font-size:xx-large;color:lightgrey;font:bold 400% arial, verdana;">
<tr ng-show="filteredItems.length==0" style="text-align:center;font-size:xx-large;color:lightgrey;font:bold 400% arial, verdana;">
<td>
No Records Found
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
To Start the AngularJS application, we have to first create the
module in js file.
The JS code is as below:
And
also controller as shown below.
The JS code is as below:
index.js
var app = angular.module('searchfunctionality', []);
app.controller('SearchFuncController', function ($scope, $window) {
$scope.ItemDetails = [
{
ItemCode: "KB384", ItemName: "KeyBoard",
ItemPrice: "500"
},
{
ItemCode: "MU932",
ItemName: "Mouse",
ItemPrice: "200"
},
{
ItemCode: "PD843",
ItemName: "Pendrive",
ItemPrice: "400"
},
{
ItemCode: "DV0495",
ItemName: "DVD Drive",
ItemPrice: "1000"
}]; //To Declare
List
$scope.filteredItems = $scope.ItemDetails;
$scope.ClearTextBoxes = function () {
$window.location.reload();
//$scope.searchItemCode
= '';
//$scope.searchItemName
= '';
//$scope.searchItemPrice
= '';
}
$scope.SearchItems = function () {
$scope.filteredItems = [];
$scope.ItemDetails.forEach(function (item) {
if (!$scope.searchItemCode && !$scope.searchItemName
&& !$scope.searchItemPrice) {
$scope.filteredItems =
$scope.ItemDetails;
}
else {
var result = searchTable(item, $scope.searchItemCode,
$scope.searchItemName, $scope.searchItemPrice);
if (result)
$scope.filteredItems.push(item);
}
})
}
function searchTable(item, searchItemCode, searchItemName,
searchItemPrice) {
return ((searchItemCode ?
item.ItemCode.toLowerCase().indexOf(searchItemCode.toLowerCase()) : -1) > -1
|| (searchItemName ? item.ItemName.toLowerCase().indexOf(searchItemName.toLowerCase())
: -1) > -1 || item.ItemPrice == searchItemPrice) ? true : false;
}
});
Output:-
When given the searchable text in
the text boxes, then the result will come as below :
If we want to
search with Item Name And Item Price, it will show the records having item name
and also item price, because it is not a combination search, it is
individual search
Download Code From GitHub
i.e.,
every input textbox control has its own search items.
If
there are no search items matched with the given text, it display "No
Record Found" as below:
Download Code From GitHub
No comments:
Post a Comment
Note: only a member of this blog may post a comment.