I have the following code that filters through a table of results:
<strong>CLIENTS [ {{ results.length }} ]</strong>
<thead ng-show="clientSearch">
<tr>
<th><i class="fa fa-search"></i></th>
<th class="search-box">
<input type="text" placeholder="Search Name" ng-model="searchResult.firstname">
</th>
<th class="search-box">
<input type="text" placeholder="Search Surname" ng-model="searchResult.lastname">
</th>
<th class="search-box">
<input type="text" placeholder="Search Address" ng-model="searchResult.address">
</th>
<th class="search-box">
<input type="text" placeholder="Search Email" ng-model="searchResult.email">
</th>
<th class="search-box">
<input type="number" placeholder="Search Mobile" ng-model="searchResult.mobile">
</th>
<th class="search-box">
<input type="date" class="datepicker" placeholder="Search By Date" ng-model="searchResult.registrationDate">
</th>
</tr>
</thead>
This is the code the produces the table data:
<tr ng-repeat="client in clients as results | filter : searchResult " ng-dblclick="open(client)">
<td>{{$index + 1}}</td>
<td>{{client.firstname}}</td>
<td>{{client.lastname}}</td>
<td>{{client.address}}</td>
<td>{{client.email}}</td>
<td>{{client.mobile}}</td>
<td>{{client.registrationDate | date: 'medium'}}</td>
<td ng-if="results.length === 0">NO RESULTS FOUND</td>
</tr>
But I get this error https://code.angularjs.org/1.3.16/docs/error/ngRepeat/badident when I try to use ngRepeat.
Any suggestions on how I can fix this.
Related
When refreshing the table data with search input field, it displays table data with the last search input field value.
How can I remove the filter on the click of the refresh/clear button and get the original data?
Please find the page view GUI
$scope.Refresh = function () {
$scope.searchall="";
$scope.DataLoad();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<button type="button" class="btn-sm btn-default" ng-click="Refresh()">Refresh</button>
<div>
<select autocomplete="off" style="width: 60px;" ng-model="CountPerPage"
ng- options="x for x in CountPerPageOptionValues">
<option value="">All</option>
</select>
</div>
<table ng-show="DataLoaded" st-table="Collection" class="table table-striped animate-show" st-safe-src="data" >
<thead>
<tr>
<th st-sort="Id">ID</th>
<th st-sort="Name">Name</th>
<th st-sort="Timestamp" style="min-width:68px;">Timestamp</th>
<th st-sort="Message" style="min-width:136px;">Message</th>
</tr>
<tr>
<th>
<input ng-model="searchall" ng-show="!nomsg" st-search="Name" placeholder="search for Name" class="input-sm form-control" style="width:140px" type="search" />
</th>
</tr>
</thead>
<tbody data-ng-hide="isLoading" data-ng-animate="'fade'">
*emphasized text*<tr ng-repeat="latestData in Collection">
<td>{{latestData .Id}}</td>
<td>{{latestData .Name}}</td>
<td>{{latestData .Timestamp | date:'dd MMM yyyy hh:mm:ss a'}}</td>
<td>
{{latestData.Message}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="CountPerPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
I used p-datatable previously and the global filter worked. However when I changed to p-table, the global filter template displayed nicely but the input box is not clickable.
Here's the code
<p-table #dt
[value]="sensorLocationList"
[columns]="cols"
[(selection)]="selectedSl"
sortMode="multiple" [paginator]="true"
[rows]="20"
[globalFilterFields]="['dummy1','dummy2','dummy3','dummy4']"
>
<ng-template pTemplate="caption">
<div style="text-align: left">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
</div>
</ng-template>
Header:
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 2.25em"></th>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
<tr>
<th style="width: 2.25em">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th *ngFor="let col of columns" [ngSwitch]="col.field">
<input *ngSwitchCase="'dummy1'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
<input *ngSwitchCase="'dummy2'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
<input *ngSwitchCase="'dummy3'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
<input *ngSwitchCase="'dummy4'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
</th>
</ng-template>
And one sample of body:
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td [pEditableColumn]="rowData" [pEditableColumnField]="'dummy1'" [ngStyle]="cellEdit(rowData)">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData.dummy1">
</ng-template>
<ng-template pTemplate="output">
{{rowData.dummy1}}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>
Everything works fine including the column filter. I've searched everywhere for the solution and found most of the problem is because the PrimeNG version was not up-to-date, but my version is updated. Any idea?
Add [pSortableColumnDisabled]="!col.sortable" to the table header tag:
<th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">
Remove "ng-template" from around the GlobalFilter
I'm using angular-smart-table, where I'm able to display my data correctly with pagination.
And I do add new records/ update existing records on the same page. Here's the screenshot for reference -
But here, I'm facing problems with pagination after adding a new record/ updating existing one. That is on refreshing an object, it doesn't consider pagination and shows all records on same page at once.
Here is my controller code -
$scope.smartTablePageSize = 10;
$scope.rowsPerPage = [5, 10, 15, 20, 25];
// my function to add a new record
vm.insertAccount = function() {
if(vm.validateAll())
$http({
method: 'POST',
url: addAccountUrl,
data: vm.accountInfo,
headers: { 'Content-Type': 'application/json' }
}).then(function(success) {
vm.getAllAccountsData(); // refreshing data object
}, function(error) {
});
}
// function to refresh data object
vm.getAllAccountsData = function() {
$http.get(accountListUrl)
.then(function(success) {
if (success.data) {
vm.allAccountsData = success.data; // updating data here
}
}, function(error) {
})
}
And the respective HTML -
<div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-xs-12 form-inline form-group mt-20">
<label for="rows">Rows on page</label>
<select class="form-control show-tick" id="rows" title="Rows on page" selectpicker ng-model="smartTablePageSize" ng-options="i for i in rowsPerPage">
</select>
</div>
<table class="table mt-20 mb-20" ng-if="vm.allAccountsData.length > 0" st-table="vm.allAccountsData">
<thead class="sortable">
<tr>
<th class="table-id" st-sort="id" st-sort-default="true">#</th>
<th st-sort="accounttype">Account Type</th>
<th st-sort="vendor">Vendor</th>
<th st-sort="accountnumber">Account No.</th>
<th st-sort="paymentmode">Payment Mode</th>
<th st-sort="ponumber">PO No.</th>
<th st-sort="vendorcode">Vendor Code</th>
<th st-sort="costcenter">Cost Center</th>
<th st-sort="glcode">GL Code</th>
<th>Action</th>
</tr>
<tr>
<th></th>
<th>
<input st-search="accounttype" placeholder="Search Account Type" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="vendor" placeholder="Search Vendor" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="accountnumber" placeholder="Search Account No." class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="paymentmode" placeholder="Search Payment Mode" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="ponumber" placeholder="Search PO No." class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="vendorcode" placeholder="Search Vendor Code" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="costcenter" placeholder="Search Cost Center" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="glcode" placeholder="Search GL Code" class="input-sm form-control search-input" type="search" />
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.allAccountsData">
<td class="table-id">{{item.index + 1}}</td>
<td>{{item.accounttype}}</td>
<td>{{item.vendor}}</td>
<td>{{item.accountnumber}}</td>
<td>{{item.paymentmode}}</td>
<td>{{item.ponumber}}</td>
<td>{{item.vendorcode}}</td>
<td>{{item.costcenter}}</td>
<td>{{item.glcode}}</td>
<td>
<button class="btn btn-info editable-table-button btn-xs" ng-click="vm.editAccount(item);">View/Edit</button>
<button class="btn btn-danger editable-table-button btn-xs" ng-click="vm.confirmDeleteAccountModal('app/pages/utilities/pdfNormalizer/confirm-delete-account.html', 'sm', item)">Delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="10" class="text-center">
<div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="10"></div>
</td>
</tr>
</tfoot>
</table>
</div>
So, on refreshing object, What I expect is the similar table with pagination as shown above. And What I'm getting is the table with all records without considering pagination -
I struggled a bit and found an answer! We can use st-safe-src directive on angular-smart-table.
I used it as -
<table class="table mt-20 mb-20" st-table="allAccountsData" st-safe-src="vm.allAccountsData">
Where, allAccountsData is a temporary data object & vm.allAccountsData is an actual one.
Then, I iterated over allAccountsData as -
<tr ng-repeat="item in allAccountsData">
That's it! No any changes in controller code!
I'm using Firefox-42.0 and AngularJS v1.4.7.
HTML :
<div class="modal-body">
<p>Select user to share with from the list below.</p>
<div class="form-group">
<label for="">Search:</label>
<input type="text" class="form-control" ng-model="SharedSearchKey" ng-model-options="{ debounce: 600 }" />
</div>
<div class="modal-table" ng-show="usersToShare && usersToShare.length">
<table class="table table-striped table-responsive table-condensed">
<thead>
<tr>
<th>Name</th>
<th>User Name</th>
<th>View Only Tasks</th>
<th>Permission</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in usersToShare">
<td ng-bind="row.ContactName"></td>
<td ng-bind="row.UserName"></td>
<td>
<input type="checkbox" ng-model="row.TaskAssign" ng-init="row.TaskAssign=true" />
</td>
<td>
<select ng-model="row.permission" ng-init="row.permission='1'">
<option value="1">Readonly</option>
<option value="2">Write</option>
</select>
</td>
<td>
<input type="checkbox" ng-model="row.selected" ng-click="toggleSelectThisUser(row)" />
</td>
</tr>
</tbody>
</table>
</div>
JS in Controller :
$scope.toggleSelectThisUser = function (user) {
console.log(user);
};
When i change dropdown and click checkBox, it doesn't reflect in $scope. $scope contains the initial value. This problem occurs in Firefox. But it works fine in google chrome.
I have a column which is populated based on a value in the JSON. I would like to filter the data based on the value I have displayed based on the value in the JSON. How can I achieve this?
JSON Data:
{
flip: {
image: "image1"
zone: "sing_tel"
},
environment: "development",
location: "sing11",
}
<table>
<thead>
<tr>
<td colspan="6">
<input type="text" class="pull-right input-large global-search" placeholder="Search .." data-ng-model="searchNetwork.$">
</td>
</tr>
<tr>
<th class="input-search">
<input type="text" class="span12" data-ng-model="srchId" data-ng-change="delaySearch('id', srchId)" placeholder="ID .." />
</th>
<th colspan="2" class="input-search">
<input type="text" class="span12" data-ng-model="srchLink" data-ng-change="delaySrch('href', searchLink)" placeholder="Net Link" />
</th>
<th class="input-search">
<input type="text" class="span12" data-ng-model="srchLocation" data-ng-change="delaySearch('loc', srchLocation)" placeholder="Location" />
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="network in networkData | orderBy:predicate:reverse | filter:searchNetwork">
<td>{{network.id}}</td>
<td>{{network.location}}</td>
<td>{{network.privacy}}</td>
</tr>
</tbody>
</table>
Flip element in the above JSON is received only for some nodes to which I display the value as FlipMe in my UI. I would like to filter my data based on this column.