AngularJS filter on multiple parameters - javascript

I have table that is populated from $scope and two search textboxes in header that I am using to filter user name and e-mail:
<table class="table">
<thead>
<tr>
<th></th>
<th><input type="search" placeholder="Search" ng-model="searchName"></th>
<th><input type="search" placeholder="Search" ng-model="searchMail"> </th>
<th></th>
</tr>
<tr>
<th>ID</th>
<th>Name</th>
<th>email</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="q in dataForTable | filter:{user_fullname : searchName, user_email : searchMail}">
<td>{{q.user_id}}</td>
<td>{{q.user_fullname}}</td>
<td>{{q.user_email}}</td>
<td>{{q.user_password}}</td>
</tr>
</tbody>
dataForTable comes from controller via $http :
$http.get('http://tbrzica.comli.com/rest/index.php/simple/users').success(function(data){
$scope.dataForTable=data;
});
But when the page initially load, table is empty. Only when I write something in textboxes and delete the input, table is populated and search by both condition is working normally. Is this some kind of bug?
Thanks in advance.
EDIT: Found a solution:
I've needed to initialize two ng-model parameters inside controller:
$scope.searchName="";
$scope.searchhMail="";
tymeJV, thank you for your answers.

In the controller, you can create a scope function for filter as following:
$scope.filterUser = function(fullName, email) {
return function(user) {
return (fullName == undefined || fullName.length == 0 || user.user_fullname == fullName)
&& (email == undefined || email.length == 0 || user.user_email == email);
}
}
And in HTML, you can apply the filter following:
<tr ng-repeat="q in dataForTable | filter:filterUser(searchName, searchMail)">
<td>{{q.user_id}}</td>
<td>{{q.user_fullname}}</td>
<td>{{q.user_email}}</td>
<td>{{q.user_password}}</td>
</tr>
Hope this help!

Related

How can I edit the particular data from API in angular

Actually, I have listed some data from API using ngFor and it's working fine. But I have a problem with editing the data. When I click the edit button it's editing the overall data but I want to edit the particular row only. Here is my code. Please refer
HTML
<table class="table table-striped" style="width: 98%; margin: 10px auto;">
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Consent Type</strong></th>
<th><strong>Updated At</strong></th>
<th><strong>Status</strong></th>
<th><strong>Content</strong></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let consent of SystemConsent">
<th *ngIf="!editorStatus">{{consent.fileName}}</th>
<th *ngIf="editorStatus"><input type="text" value="{{consent.fileName}}" class="form-control"></th>
<th *ngIf="!editorStatus">{{consent.type}}</th>
<th *ngIf="editorStatus"><input type="text" value="{{consent.type}}" class="form-control"></th>
<th>{{consent.updatedAt}}</th>
<th *ngIf="!editorStatus">{{consent.status}}</th>
<th *ngIf="editorStatus"><input type="text" value="{{consent.status}}" class="form-control"></th>
<th *ngIf="!editorStatus" [innerHTML]="consent.content"></th>
<th *ngIf="editorStatus">
<ckeditor name="htmlEditor" [config]="config" [editor]="Editor" [(ngModel)]="consent.content" skin="moono-lisa" language="en">
</ckeditor>
</th>
<th><button class="btn trans-btn list-head-btn ng-star-inserted btn-gradient" (click)="changeEditor()">Edit</button></th>
<th><button [disabled]="!editorStatus" class="btn trans-btn list-head-btn ng-star-inserted btn-gradient" (click)="getEditorValue()">Save</button></th>
</tr>
</tbody>
</table>
Typescript
getAdminSystemPrefrences() {
this.adminDashboardService.getSystemPreferences().then(resp => {
this.SystemConsent = resp['data'].consent;
});
}
changeEditor() {
this.editorStatus = true;
}
getEditorValue() {
this.editorStatus = false;
}
Screenshot
Please Help me to fix this issue
You should define smth as a unique cell identifier (id, name, ...) in the data.
Define a public property to store the editing cell id
public selectedEditCellId; // number, string, UUID, etc
on invoking the edit mode, pass the cell id
changeEditor(cellId) {
this.selectedEditCellId = cellId;
this.editorStatus = true;
}
pass the cell ID on click
<td *ngIf="!editorStatus" (click)="changeEditor(CELL_ID)">{{consent.status}}
</td>
<td *ngIf="editorStatus && consent.id === selectedEditCellId">
<input type="text" value="{{consent.status}}" class="form-control">
<button (click)="changeEditor(undefined)">close editior</button>
</td>
then you can update the *ngIf condition to check the editorStatus property and the identifier
*ngIf="editorStatus && consent.id === selectedEditCellId"

Why my table filter is removing the table headers?

I'm trying to implement this table filter which i found at this tutorial but for some reason my filter is removing my table headers and in the examples it doesn't remove the headers, I wonder what I'm doing wrong here?
This is my table:
<input type="text" id="inputFilter" placeholder="Procurar agendamentos..">
<table class="table table-hover table-dark" id="tableAgendamentos">
<thead>
<tr>
<th scope="col">Data</th>
<th scope="col">Animal</th>
<th scope="col">Procedimento</th>
<th scope="col">Status</th>
<th scope="col">Valor</th>
<th scope="col">Nota Fiscal</th>
</tr>
</thead>
<tbody>
#foreach (Agendamento agendamento in Model.ListaAgendamentos)
{
<tr>
<th scope="row">#agendamento.DataHoraInicio</th>
<td>#agendamento.nomeAnimal</td>
<td>#agendamento.NomeServico</td>
#if(agendamento.prioridadeAgendamento == 3)
{
<td class="text-success">Em até 7 dias</td>
}else if(agendamento.prioridadeAgendamento == 2)
{
<td class="text-primary">Em até 30 dias</td>
}else
{
<td class="text-danger">Atrasado/Vencido</td>
}
<td>R$100,00</td>
<td>Baixar</td>
</tr>
}
</tbody>
</table>
This is my script:
<script>
$(document).ready(function(){
$("#inputFilter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tableAgendamentos tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
This is how my table looks without searching anything
This is how my table looks after searching for some data
Thanks in advance.
Looks like the header is getting filtered out.
I think you could give it a try with an id for tbody instead of the whole table id in the script.
Looking at the tutorial, there seems to be a point at the end stating
Note that we start the search in tbody, to prevent filtering the table headers.
I think error is about this
$("#tableAgendamentos tr")
I think give a class name to tr instead of above code then try again

how to send object from html ng-repeat to js function

I am getting data from db and put it in a scope, then iterate on these data by ng-repeat in html.
what i am trying to do is to send the selected object when the user check on a checkbox to get another data based on an id for example . i tried to use ng-model and ng-change on the checkbox but it sends only true or false .
HTML
<div id="frame" class="widget-content" style="height:50vh; overflow:auto;">
<table style="font-size: 12px;display: inline-block;">
<thead>
<tr>
<th>Check</th>
<th>Group Code</th>
<th>Group Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in Groups | unique : 'Group_code'"
ng-click="showInEdit(g)"
ng-class="{selected:g === selectedRow}">
<td><input type="checkbox" ng-model="g"
ng-true-value="g" ng-change="Getrequest2(g)"/>
<td>{{g.Group_code}}</td>
<td>{{g.group_name_latin}}</td>**
</tr>
</tbody>
</table>
<table style="font-size: 12px; float: left;">
<thead>
<tr>
<th>Check</th>
<th>Item Code</th>
<th>Item Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in items | unique : 'Item_code'"
ng-click="showInEdit(i)"
ng-class="{selected:i === selectedRow}">
<td><input type="checkbox" />
<td>{{i.Item_code}}</td>
<td>{{i.ITEM_NAME_LATIN}}</td>
</tr>
</tbody>
</table>
</div>
angularjs
$scope.Getrequest1 = function (g) {
//console.log(g);
$scope.typecd = g.TypeCode;
$scope.ShowLoading('slow');
LOASrv.GetGroup("LOAApprovalSetup/GetGroup" +
"?typ=" + g.TypeCode +
'&hospid=' + $scope.hospitalid +
'&userky=' + $scope.userkey
).then(function (response) {
$scope.Groups = (response.data);
$scope.HideLoading('slow');
})
}
$scope.Getrequest2 = function (i) {
console.log(i);
$scope.ShowLoading('slow');
LOASrv.GetItem("LOAApprovalSetup/GetItem" +
"?typ=" + $scope.typecd +
'&hospid=' + $scope.hospitalid +
'&userky=' + $scope.userkey +
'&groupcd=' + i
).then(function (response) {
$scope.items = (response.data);
$scope.HideLoading('slow');
})
}
You’re assigning ‘g’ object to checkbox ng-model.
This changes the value of ‘g’ from object to boolean on checkbox select.
That’s why you’re getting true/false
Change ng-model=“g.someBooleanName” and try

Angular search for combined key

Say you have the following object:
var user: {firstname: 'Marc', lastname:'Ras', age:30};
You have alot of these objects in an array called: user_array
Now you wish to display them in a table so you create your table:
<table>
<thead>
<th>Full name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="user in user_array">
<td>{{user.firstname + ' '+user.lastname}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>
Now you wish to create an input field where you can search for a user's full name:
And here is kinda ends for me :S how is it possible to search for a combinded key? normally you would have:
<input type="text" ng-model="search.fieldname" />
However you cant do that here since the field is combined of two fieldnames?
add this to your controller
$scope.filterNameLastName = function (user) {
var fullname = user.firstname + ' '+ user.lastname;
if(fullname == $scope.searchParamater)
return true;
else
return false;
};
and add filter to ng-repeat
<table>
<thead>
<th>Full name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="user in user_array | filter:filterNameLastName ">
<td>{{user.firstname + ' '+user.lastname}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>
This should give you an idea on how custom filters work. I haven't tested the code so you may have to do some modifications.

How to have checkbox function access table data in Angularjs

I have a table in Angularjs that has a checkbox in each row. When the checkbox is clicked, I would like an alert function to be launched to display the content of the row being clicked. The problem I face is how can the alert function access the data content of the row?
The table in html looks like this;
<table class="table table-hover data-table sort display">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Checkbox Alert</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">
<td>{{item.name}}</td>
<td>{{item.location}}</td>
<td> <input type="checkbox" ng-click="alert_display()"> </td>
</tr>
</tbody>
</table>
The controller code looks like this;
$scope.alert_display = function()
{
alert("Testing");
};
I would like alert_display() to display the contents of {{item.name}} and {{item.location}} of the relevant row.
Do the following:
<input type="checkbox" ng-model="selected" ng-change="display(selected, item)">
your JS code:
$scope.display = function(selected, item) {
if(selected)
alert(item.name + ' ' + item.location);
else
// do sth else
}
Here is the fiddle: http://jsfiddle.net/HB7LU/4156/

Categories