I have a problem for filtering a table in AngularJS into ng-repeat.
I would like to add radio button (based on table column) under a search
text field for adding more filters.
For the moment when I enter "char" in the text field, the system filters
correctly the table and displays all results.
My goal: if I select the radio button "Person", only the results with the
person containing "char" should appear. If I click on "company", the radio
button "Person" should be unselected and only result with the company
containing "char" should appear.
*Here my view:*
<div class="spacer input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
<input type="text" ng-model="searchText" class="form-control"
placeholder="Search name..." ng-change="search(searchText)"/>
<div class="input-group-btn">
<button class="btn btn-default" ng-click="razRecherche()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
<div>
<!-----------------HERE THE RADIO BUTTONS ----------- START --->
<input type="radio" name="filter" value="PERSON" ng-model=
"search.PERSON">
<label for="PERSON">Person</label>
<input type="radio" name="filter" value="COMPANY" ng-model=
"search.COMPANY">
<label for="COMPANY">Company</label>
<!-----------------HERE THE RADIO BUTTONS ------------- END --->
</div>
<div class="table-responsive" id="allContacts">
<table ng-show="contacts.length" class="table table-striped
table-hover spacer">
<thead>
<tr>
<th class="colPerson">
<a href="" ng-click="personsSort('PERSON')">Person
</a>
<span class="hSpacer" ng-class=
"cssChevronsTri('PERSON')"></span>
</th>
<th class="colCompany">
<a href="" ng-click="personsSort('COMPANY')">Company
</a>
<span class="hSpacer" ng-class=
"cssChevronsTri('COMPANY')"></span>
</th>
<th class="colDescription">
<a href="" ng-click=
"personsSort('REQUESTDESCRIPTION')">Description</a>
<span class="hSpacer" ng-class=
"cssChevronsTri('REQUESTDESCRIPTION')"></span>
</th>
</tr>
</thead>
<tbody ng-repeat="contact in contacts | filter:searchText |
orderBy:champTri:triDescendant">
<tr class="clickable">
<td class="colPerson" ng-click=
"selContact(contact,contact.ID)" ng-class="{sel:selIdx==$index}"><a href=
"#/view-contacts/{{contact.ID}}">{{contact.PERSON}}</a></td>
<td class="colCompany" ng-click=
"selContact(contact,contact.ID)">{{contact.COMPANY}}</td>
<td class="colDescription" ng-click=
"selContact(contact,contact.ID)">{{contact.REQUESTDESCRIPTION}}</td>
</tr>
</tbody>
</table>
</div>
*My controller:*
app.controller('ctrlContacts', function ($scope, $timeout, ContactService
){
$scope.search = function(searchText) {
$scope.reloadPreviousSearch = false;
if (!searchText.length) {
//alert("searchText empty");
}
if (searchText.length>2) {
$timeout(function () {
// RETRIEVE DATA FROM JSON OBJECT OF THE SERVER SEVICE
AND A DB QUERY - OK
ContactService.fastSearch(searchText).success(function(
contacts){
console.log("query fastSearch OK");
var length = contacts.length;
$scope.loading = false;
if (length == 0) {
$scope.searchButtonText = "No result";
}else {
$scope.searchButtonText = length + " results
found";
}
// For the orderby date
for (var i=0; i<length; i++) {
if(contacts[i].REQUESTTRUEDATE!=""){
contacts[i].REQUESTTRUEDATE = new Date(
contacts[i].REQUESTTRUEDATE.replace(/-/g,"/"));
}else{
contacts[i].REQUESTTRUEDATE=null;
}
}
$scope.contacts = contacts;
$scope.champTri='PERSON';
$scope.selIdx= -1;
$scope.selContact=function(contact,idx){
$scope.selectedContact=contact;
$scope.selIdx=idx;
window.location="#/view-contacts/" + idx;
}
$scope.isSelContact=function(contact){
return $scope.selectedContact===contact;
}
});
}, 1000);
}else{
$scope.contacts=null;
}
}
// SEARCH
$scope.searchText = null;
$scope.razRecherche = function() {
$scope.searchText = null;
$scope.contacts=null;
}
// SORT
$scope.champTri = null;
$scope.triDescendant = false;
$scope.personsSort = function(champ) {
if ($scope.champTri == champ) {
$scope.triDescendant = !$scope.triDescendant;
} else {
$scope.champTri = champ;
$scope.triDescendant = false;
}
}
$scope.cssChevronsTri = function(champ) {
return {
glyphicon: $scope.champTri == champ,
'glyphicon-chevron-up' : $scope.champTri == champ && !$scope
.triDescendant,
'glyphicon-chevron-down' : $scope.champTri == champ &&
$scope.triDescendant
};
}
});
I'm trying to add the radio buttons for filtering the table from the text
entered in the text field. But I don't know how to use them for filtering
the table into the ng-repeat.
Could you please help me to add the filters on the text field (searchText)
with the radio buttons?
Thank you in advance for your help.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
