How to search column separately in angularjs? [Resolved]

Posted by Tsurendra690-29180 under AngularJS on 12/27/2016 | Points: 10 | Views : 499 | Status : [Member] | Replies : 6
I have Five columns as Id, Name, Country, Salary and Age in <thead>, In the <tbody>of first row i have text boxes for every five columns for searching and in the next rows of the <tbody> i have values to search, my question is if i search Name, it should show Name records, it is showing for me as if i search Name in Country textbox it is showing Name(It is showing search for all, it should only for given Name) , can any body help with sample code please, its urgent .




Responses

Posted by: Nandkishorre on: 12/28/2016 [Member] Starter | Points: 50

Up
0
Down

Resolved
Hi surendra, look into this code.. you can understand.


 <div class="container" ng-app="myApp" ng-controller="myctrl">      

<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
<input type="text" class="form-control" placeholder="Search" ng-model="searchsearch" />
</div>
</div>
</form>
<table class="table table-bordered table-stripped">
<thead>
<tr>
<td>
<a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
Name
<span ng-show="sortType == 'Name' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Name' && sortReverse" class="fa fa-caret-up"></span>
</a><br />
<input type="text" ng-model="searchsearch.Name" />
</td>
<td>
<a href="#" ng-click="sortType = 'Country'; sortReverse = !sortReverse">
Country
<span ng-show="sortType == 'Country' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Country' && sortReverse" class="fa fa-caret-up"></span>
</a><br />
<input type="text" ng-model="searchsearch.Country" />
</td>
<td>
<a href="#" ng-click="sortType = 'Salary'; sortReverse = !sortReverse">
Salary
<span ng-show="sortType == 'Salary' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Salary' && sortReverse" class="fa fa-caret-up"></span>
</a><br />
<input type="text" ng-model="searchsearch.Salary" />
</td>
<td>
<a href="#" ng-click="sortType = 'Age'; sortReverse = !sortReverse">
Age
<span ng-show="sortType == 'Age' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'Age' && sortReverse" class="fa fa-caret-up"></span>
</a><br />
<input type="text" ng-model="searchsearch.Age" />
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in records | orderBy:sortType:sortReverse | filter:searchsearch">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
<td>{{ x.Salary }}</td>
<td>{{ x.Age}}</td>
</tr>
</tbody>
</table>
</div>


var app = angular.module("myApp", [])
app.controller("myctrl", function ($scope) {
$scope.sortType = 'Name';
$scope.sortReverse = false;
$scope.searchsearch = '';
$scope.records = [
{
"Name": "John",
"Country": "America",
"Salary": "One",
"Age": "24"
},
{
"Name": "Ram",
"Country": "India",
"Salary": "Two",
"Age": "27"
},
{
"Name": "Raju",
"Country": "India",
"Salary": "Three",
"Age": "26"
},
{
"Name": "Ravi",
"Country": "India",
"Salary": "Four",
"Age": "31"
},
{
"Name": "Raghu",
"Country": "India",
"Salary": "Five",
"Age": "35"
},
{
"Name": "Ravan",
"Country": "India",
"Salary": "Six",
"Age": "33"
},
{
"Name": "Samy",
"Country": "India",
"Salary": "Seven",
"Age": "30"
},
{
"Name": "samuel",
"Country": "India",
"Salary": "Eight",
"Age": "30"
}
];
});


Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Nandkishorre on: 12/28/2016 [Member] Starter | Points: 25

Up
0
Down
Hi Surendra,
you can write in
 ng-model="searchcolumn.searchColumnName"
in searching textbox.

here filter is searchcolumn
searchColumnName is binding data to td

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Tsurendra690-29180 on: 12/28/2016 [Member] Starter | Points: 25

Up
0
Down
Hai Nandikishore,

Thanks for your response, but i did not understand what you are saying

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Tsurendra690-29180 on: 12/28/2016 [Member] Starter | Points: 25

Up
0
Down
Am having Four text box Id,Name, Salary and Age


Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Nandkishorre on: 12/28/2016 [Member] Starter | Points: 25

Up
0
Down
Did you write filter that one in table ng-repeat.if use filter name, use that filter name in binding column name
ng-model= "filterName.searchColumnName"


Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Tsurendra690-29180 on: 12/28/2016 [Member] Starter | Points: 25

Up
0
Down
Thanks NandKishoree, i got it

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response