Is it possible to save the orderBy so that if a user sorts the data then refreshes the page, the last sort (column and ascending/descending) is still apparent?
Here is my view.
<table>
<tr class="sortheaders">
<th class="small"> </th>
<th class="medium">Name</th>
<th class="medium">Age</th>
</tr>
<tr ng-repeat="result in results | orderBy:predicate:reverse">
<td>{{$index+1}}</td>
<td>{{ result.name }}</td>
<td>{{ result.age }}</td>
</tr>
</table>
The simplest way to save data over a refresh would be by saving cookies in the user's browser. You can inject an ngCookies module. Read more about cookies and how to use the module here.
Related
I'm using ng-zorro with Angular to show pagination in a table with data from a REST API request.
But when I add the ng-template (#rangeTemplate) to show the request total items, the next and previous buttons of pagination don't work anymore (it brakes the GET request).
<nz-table #searchResultUsersTable
[nzPageIndex]="pageIndex"
[nzPageSize]="pageSize"
[nzShowTotal]="rangeTemplate"
[nzData]="curedUserList"
[nzTotal]="totalUser"
nzShowSizeChanger="true"
[nzPageSizeOptions]="pageSizeOptions"
nzFrontPagination="false"
nzPaginationPosition="bottom"
[nzScroll]="{ y: '500px' }"
(nzQueryParams)="onQueryParamsChange($event)"
[nzNoResult]="emptyTable">
<thead>
<tr>
<th>Auth0 ID</th>
<th nzColumnKey="last_login" [nzSortFn]="true">{{ 'SEARCH.RESULT.COLUMN-LAST-LOGIN' | translate }}</th>
<th nzColumnKey="email" [nzSortFn]="true">{{ 'SEARCH.RESULT.COLUMN-EMAIL' | translate }}</th>
<th>Applications</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of searchResultUsersTable.data">
<td>{{ data.auth0Id }}</td>
<td>{{ data.last_login | date }}</td>
<td>{{ data.email }}</td>
<td>{{ data.app }}</td>
</tr>
</tbody>
<ng-template #rangeTemplate let-range="range" let-total>
{{ range[0] }}-{{ range[1] }} of {{ total }} items
</ng-template>
</nz-table>
Anybody knows how to fix it?
I'm using angular datatable to populate list of users in my application and following this simple Angular Way. All code is working fine except the pagination button click. I gives proper numbering according to data but when i click anyone of them, it does not move to that list of data. I've added its libraries and this is my html code
<table datatable="ng" class="table table-striped table-bordered">
<thead>
<tr>
<th>User Name</th>
<th>First Name</th>
<th>Last Name</th>
<th>Cell No.</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in allUsers">
<td>{{ user.UserName }}</td>
<td>{{ user.FirstName }}</td>
<td>{{ user.LastName }}</td>
<td>{{ user.CellNo }}</td>
<td>{{ user.Email }}</td>
<td><button type="button" ng-click="btnView_Click(user.Id)" class="btn btn-info"><i class="fa fa-edit"></i> View</button></td>
</tr>
</tbody>
</table>
and this is how its showing buttons But nothing happens when I click any of these buttons (e.g Prev, 1,2,...Next)
I don't know how to create a fiddle for this. Can anyone have any guesses what I'm missing? and why this is happening??
I have a navbar on my page that has an input on it that I want to search a view, that should load in index.html after the user types in their search items. I can only figure out how to search with an input if it's in the same page that the table of ng-repeat items is in. Is there a way to search the table outside of the view? I've created a plnkr. It doesn't work. I'm not sure how to make it work. http://plnkr.co/edit/nqChzn5OATNMeSZL7ItJ?p=preview
Here is some of my code:
navbar
<input type="text" class="form-control" placeholder="Search" ng-model="vm.query">
Here is my table where the data displays.
<table ng-if="query" class="table table-hover table-responsive" >
<thead>
<tr>
<th>
({{filteredResults.length}}) Results Found
</th>
</tr>
<tr>
<td>Acc. ID</td>
<td>Acc. Name</td>
<td>Acc Address</td>
<td>City</td>
<td>Zip</td>
<td>Phone</td>
<td>Parent Name</td>
<td>Account Type</td>
<td>Account Status</td>
<td>Credit Term</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in vm.results | filter:query as filteredResults">
<td>{{ result.accountId }}</td>
<td>{{ result.accountName }}</td>
<td>{{ result.address }}</td>
<td>{{ result.city }}</td>
<td>{{ result.state }}</td>
<td>{{ reuslt.zip }}</td>
<td>{{ result.phone }}</td>
<td>{{ result.parentName }}</td>
<td>{{ result.accountType }}</td>
<td>{{ result.accountStatus }}</td>
<td>{{ result.accountStatus }}</td>
</tr>
</tbody>
</table>
Is it possible to do what I want to do?
I've looked at your plunker and I don't believe that your code hasn't initialized angular. I can't see an ng-app tag anywhere in your code.
That a side, you will be able to use any input to filter/search (via. various implementations) so long as the input and table are contained with your ng-app and controller parts of the DOM. Otherwise you won't be able to access it the controller.
Can I suggest that you distill your question down? give the smallest amount of code that demonstrates your problem.
here's a rough outline:
<body ng-app="app" ng-controller="cntrl">
<!-- nav bar -->
<div>
<input ng-model="filterVal"/>
</div>
<!-- table -->
<div>
<table>
<tr ng-repeat="r in data.rows | filter:filterVal">....</tr>
</table>
</div>
</body>
Here's a plunker where the default filter functionality is working: http://plnkr.co/edit/GDJs5xTCpqq48SDFTk67
If you need to have your nav bar outside of your app/controller or in an different controller (etc.) then there are solutions to this.
Assuming you are using ui-route, this is how to use a service to communicate between controllers:
functioning example:
http://plnkr.co/edit/fZZLUvlHO9zUFwQYd1an?p=preview
Eggheads video:
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
I'm trying to databind an object received via an HTTP request to a table in angularjs.
The normal way to do this would be to use ng-repeat as follows.
<table class="table table-striped">
<tr>
<th>name</th>
<th>artist</th>
</tr>
<tr>
<td ng-repeat="track in $scope.trackList.items">
{{ track.name }}
{{ track.artist }}
</td>
</tr>
</table>
The problem with this is that the page loads and ng-repeat is ran before the data is returned from the server causing no items to be in the collection so nothing is drawn into the table.
What would be the best way to do this?
You don't need $scope in your view. Also, you probably want to put ng-repeat on <tr>, not <td>.
<table class="table table-striped">
<tr>
<th>name</th>
<th>artist</th>
</tr>
<tr ng-repeat="track in trackList.items">
<td>{{ track.name }}</td>
<td>{{ track.artist }}</td>
</tr>
</table>
You don't need $scope here just simple trackList.items.
$scope is the glue b/w Views and controller and you don't need to explicitly call $scope in the view it is already implicit that things are already picking from the scope.
<td ng-repeat="track in trackList.items">
{{ track.name }}
{{ track.artist }}
</td>
And if you are talking about the http call then here come's the magic of two way binding into picture.If anything update in controller by $http call that will be reflect in view as well you don't need to do it manually.
Hope it helps. :)
Let me correct your code first
<table class="table table-striped">
<tr>
<th>name</th>
<th>artist</th>
</tr>
<tr>
<td ng-repeat="track in trackList.items">{{ track.name }}</td>
<td>{{ track.artist }}</td>
</tr>
</table>
You don't have to explicitly specify $scope while binding data.
With respect to your problem, even though the code will get executed when the page is getting loaded, any changes that you do to the scoped data will be honored by the angular and view will get updated.
In your case, at the time of page load, if there is data available in trackList.items it will be shown in the page. Otherwise table will be rendered with just headers. Later when the application receives data from AJAX (or any other source), you have to simply assign it to $scope.trackList in your JS code. This will result in instant view updates and you will see the table starts reflecting the new data.
I'm trying to mix a table with angular-ui's accordion but I can't figure out a way to do it.
I'm not a pro, writing directives. I wonder if such a bridge exist. To achieve something like this :
<table class="table table-hover table-condensed" thead>
<thead>
<tr>
<th>{{ data.profile.firstname }}</th>
<th>{{ data.profile.lastname }}</th>
<th>{{ data.profile.email }}</th>
<th>{{ data.profile.company_name }}</th>
<th>{{ data.profile.city }}</th>
</tr>
</thead>
<tbody accordion close-others="true">
<!-- <tr ng-repeat="client in clients" ng-click="goTo('profile/' + client.username);"> -->
<tr ng-repeat="client in clients" accordion-group is-open="client.isOpen">
<accordion-heading>
<td>{{ client.firstname }}</td>
<td>{{ client.lastname }}</td>
<td>{{ client.email }}</td>
<td>{{ client.company_name }}</td>
<td>{{ client.city }}</td>
</accordion-heading>
Accordion Content
</tr>
</tbody>
</table>
Though it's not working :( Is there anyone who succeded to achieve something like this ?
The result I'm looking for is for when I click on a line in the table, it does the same behavior of an accordion.
In my case I made it a bit primitive but maybe that would be a good solution for you as well. Look:
<tbody ng-repeat="person in people | orderBy:predicate:reverse" >
<tr ng-click="isOpen=!isOpen">
<td>{{person.name}}</td>
<td>{{person.job}}</td>
<td>{{person.age}}</td>
<td>{{person.grade}}</td>
</tr>
<tr ng-if="isOpen">
<td>Just an empty line</td>
</tr>
</tbody>
1) You can try div instead of table for main accordion. It works for me.
2) And here is the accordion table example done in JSFiddle below, i hope it will help you. http://jsfiddle.net/Pixic/VGgbq/