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.
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'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 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.
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 am trying to get the id value from each row in a ng-repeater into an input type="text" to be able to save the sort order of the table. But I don't know how to just extract the id, so I get the full vlaue of the list.
The table looks like this:
<table class="table table-striped">
<thead>
<tr>
<th class="position"></th>
<th>Specification Title</th>
<th>Last modified</th>
<th class="right">Used in</th>
</tr>
</thead>
<tbody ui-sortable="sortableOptions" ng-model="specsList">
<tr ng-repeat="spec in specsList">
<td class="position draggable"></td>
<td>{{spec.title}}</td>
<td>{{spec.lastModified}}</td>
<td class="right color_green"><strong>{{spec.usedIn}}</strong> of 12 products</td>
</tr>
</tbody>
</table>
And the input:
<input type="text" id="tableSortOrder" value="{{specsList}}">
Current value in the input text:
[{"id":"123","title":"Brand","lastModified":"2012-08-14","usedIn":"7"},{"id":"789","title":"Amount","lastModified":"2010-07-22","usedIn":"5"},{"id":"456","title":"ISBN","lastModified":"2010-02-24","usedIn":"2"}]
What I want to achieve:
123, 789, 456
Thanks for any help!
Is this what you want?:
<input type="text" id="tableSortOrder" value="{{ specsList.map(function(item){return item.id;}).join() }}" />
You could do that in a filter too, like this:
<input type="text" id="tableSortOrder" value="{{ specsList | splitIds }}" />
app.filter('splitIds', function() {
return function(ArrayWithIds) {
return ArrayWithIds.map(function(item){return item.id;}).join();
};
});
I've made this jsfiddle so that you can see how it works: http://jsfiddle.net/d5ye9mus/2/