I have an angular html snippet below of a table I am trying to wire up using Dir-Paginate and also have the table row change class based on a function on the controller.js
<tr dir-pagination="response in vm.responses | toArray | orderBy:'-completionTime' | itemsPerPage: $root.pagination.itemsPerPage" class="{{ vm.getRowClass($index) }}">
<td> {{ $index + 1 }}</td>
<td><a ui-sref="response({uri:response.uri})">{{ response.name }}</a></td>
<td>{{ response.email }}</td>
<tr>
<dir-pagination-controls ng-show="appvm.showDataTable()" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="ng/pagination"></dir-pagination-controls>
If i remove all of the Dir-Pagination syntax and make it just a normal ng-repeat the vm.getRowClass($index) works as it should, changing the class based on the function's logic. However, when I try to add the dir-pagination syntax in, i am given a $Index is undefined error.
Problem seems to be that Dir-Paginate does not allow me to pass in an $index or any item on the same line as the <tr>
After the comment and some playing around i found the solution.
I needed to add track by $index to the end of the itemsPerPage: $root.pagination.itemsPerPage area.
Shown correctly below.
<tr dir-pagination="response in vm.responses | toArray | orderBy:'-completionTime' | itemsPerPage: $root.pagination.itemsPerPage track by $index" class="{{ vm.getRowClass($index) }}">
<td> {{ $index + 1 }}</td>
<td><a ui-sref="response({uri:response.uri})">{{ response.name }}</a></td>
<td>{{ response.email }}</td>
<tr>
Related
I have a table that's generated using ng-repeat with some columns headers. On the column headers, I want to columns to be sorted. I included a font-awesome sort icon next to their text and when it's clicked, I call an ng-click with ng-click="sortColumn()". I'm calling this for every column header.
How do I know which column header got clicked on? Right now it fires for each header column.
How do pass the current column in using ng-click?
I tried to pass in this, but it returns the $scope object.
Here's what I have so far:
HTML:
<table class="table">
<thead>
<tr>
<td><b>Product </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
<td><b>Code </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
<td><B>Available </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
<td><B>Price </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
</tr>
</thead>
<tbody>
{{ vm.noProducts }}
<tr ng-repeat="product in vm.products">
<td>{{ product.productName}}</td>
<td>{{ product.productCode }}</td>
<td>{{ product.releaseDate | date }}</td>
<td>{{ product.price | currency }}</td>
</tr>
</tbody>
</table>
Javascript:
vm.sortColumn = function (obj) {
console.log(obj);
}
I don't think that you can just pass column as object to sortColumn(). If you need column in that function you can loop trough products and make a new array that will be populated for example with all product names.
Maybe that function could look like this:
function getColumn(val){ // 'productName'
var column = [];
for(var i in $scope.products){
column.push(column.push($scope.products[i][val]))
}
return column
}
If you want to sort table you can use orderBy filter.
To your sortColumn() function pass parameter name and in your ng-repeat use orderBy to order column ascending/descending by one of the parameters.
<table class="table">
<thead>
<tr>
<td ng-click="sortColumn('productName')"><b>Product </b></td>
<td ng-click="sortColumn('productCode')"><b >Code </b></td>
<td ng-click="sortColumn('releaseDate')"><b >Available </b></td>
<td ng-click="sortColumn('price')"><b >Price </b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products | orderBy: criteria">
<td>{{ product.productName}}</td>
<td>{{ product.productCode }}</td>
<td>{{ product.releaseDate | date }}</td>
<td>{{ product.price | currency }}</td>
</tr>
</tbody>
</table>
In your controller set default value for orderBy criteria. (I used here productName)
$scope.criteria = 'productName';
$scope.sortColumn = function(val){
console.log(val)
if($scope.criteria == val){
$scope.criteria = "-"+val;
} else {
$scope.criteria = val;
}
If user clicks on productCode for example, all rows will be sorted by that criteria ascending ('productCode'), if user click on productCode once again all will be sorted descending by criteria '-productCode'
I created small plunker to demonstrate that. Hope it helps.
I have two JSON objects defined in a controller (NotificationsController). One with all the notifications and another one with only the ID of the newest notifications (last 3 days).
Format of object "notifications": (t_notifications)
[{"0":"1","1":"4","2":"14-APR-16","3":"ALERT 1","ID":"1","ID_USER":"4","DATE":"14-APR-16","NOTIFICATION":"ALERT 1!"},{"0":"2","1":"1","2":"07-APR-16","3":"ALERT 2!","ID":"2","ID_USER":"1","DATE":"07-APR-16","NOTIFICATION":"ALERT 2!"},{"0":"3","1":"1","2":"13-APR-16","3":"ALERT 3!","ID":"3","ID_USER":"1","DATE":"13-APR-16","NOTIFICATION":"ALERT 3!"}]
Format of object "newest notifications": (newest_notifications)
[{"0":"1","ID_NEWNOTIF":"1"},{"0":"3","ID_NEWNOTIF":"3"}]
I'm displaying all the notifications in a view like this:
<div class="panel-body" ng-controller="NotificationsCtrl">
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th><b>ID</b> </th>
<th><b>ID_USER</b> </th>
<th><b>DATE</b> </th>
<th><b>NOTIFICATION</b> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in t_notifications" ng-class="{selected: data.ID == **TO COMPLETE**>
<td>{{ data.ID }}</td>
<td>{{ data.ID_USER }}</td>
<td>{{ data.DATE }}</td>
<td>{{ data.NOTIFICATION }}</td>
</tr>
</tbody>
</table>
</div>
I would like to know how it is possible to select in my table only the newest notifications - searching through the JSON object newest_notifications - with ng-class?
PS: "selected" is already defined with a blue background color.
Just use a strict filter
... ng-class="{'selected': (newest_notifications | filter : { ID_NEWNOTIF: data.ID } : true).length !== 0 }"
Fiddle - https://jsfiddle.net/dyxf5xqj/
You can use a expression against data.DATE. For example
<tr ng-repeat="data in t_notifications" ng-class="{selected: data.DATE > someDateInThePast}">
I have a form
and i want that in "mark your attendence here "link should be visible only to the user which is logged in (/or disabled for the not logged in users .).please tell me how to do this :
here is my code
<tr ng-repeat="person in user.users">
<td>{{ person._id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.username }}</td>
<td>{{ person.joiningDate }}</td>
<td ng-show="user.loggedIn"><a href="/users/{{ person._id }}/attendence" >Mark your attendence here</a></td>
<td class="col-sm-2">
<a ng-href="/users/{{ person._id }}" class="btn btn-danger">Edit</a>
Delete
</td>
</tr>
if i use user.loggedIn service then because of a particular user logged in it show the attendence column
Create a function in controller. Call the authservice from that function and on authentication success , set a Boolean to true. Give that boolean in ngShow.
i am new to angularjs. i am trying to display a table with some data read from a db. one of the pieces of data i receive from DB is called IS_LOCKED. if it's 1, i want to display an image of a locked padlock, else display an image of an unlocked padlock.
if i do the following in angular where i write out "LOCKED" and "UNLOCKED", the output table is correct:
<tr ng-repeat="x in retData.projects | orderBy:'NAME'">
<td>{{ x.NAME }}</td>
<td>{{ x.IS_LOCKED==1 ? "LOCKED" : "UNLOCKED" }}</td>
</tr>
if i do the if statement and print out the url, it doesn't work....i get the code back and both images display, ie: "{{ x.IS_LOCKED===1 ? (locked padlock image here) : (unlocked padlock image here)}}"
<tr ng-repeat="x in retData.projects | orderBy:'NAME'">
<td>{{ x.NAME }}</td>
<td>{{ x.IS_LOCKED==1 ? <img src=./images/padlock_locked.png width=20 height=20> : <img src=./images/padlock_unlocked.png width=20 height=20>}}</td>
</tr>
tried doing some ng-switch and other things, but kept getting compile errors. sorry, new to angular...not sure if i am doing this correctly. anyone know how to do this right?
Use ng-src
<td><img ng-src="{{(x.IS_LOCKED == 1) ? './images/padlock_locked.png' : './images/padlock_unlocked.png'}}" width=20 height=20></td>
Allow me to begin by saying that I am a C++ developer by profession and have extremely poor javascript skills, so please forgive me if this is a basic question. What I am trying to do is take a string being generated from an Angular binding and pass it to a function in javascript. I have included an example below. Note that I am trying to pass {{x.VodName}} to the function called "MyFunction(vodName)". Thanks in advance!
<tr ng-repeat="x in names">
<td><a id="myLink" href="#" onclick="MyFunction({{ x.VodName }});">{{ x.VodName }}</a></td>
<td>{{ x.Stream }}</td>
<td>{{ x.ReplayTime }}</td>
<td>{{ x.Duration }}</td>
<td>X</td>
<script>
function MyFunction(vodName)
{
window.alert(vodName);
}
In your template you can give an variable to a function by just giving it to the function. And instead of onclick you should use ng-click
<tr ng-repeat="x in names">
<td><a id="myLink" href="#" ng-click="MyFunction(x.VodName);">{{ x.VodName }}</a></td>
<td>{{ x.Stream }}</td>
<td>{{ x.ReplayTime }}</td>
<td>{{ x.Duration }}</td>
<td>X</td>
</tr>
For you function in the controller it can be important to know the difference between var MyFunction = function(name){} and function MyFunction(name){}. For more about this, look here
try something like this, where your controller could look like:
<script>
var vapp = angular.module("vapp", []);
vapp.controller("videoController", ["$scope", function($scope){
$scope.names = [];
$scope.play = function(files){
alert(files.VodName);
};
}]);
</script>
and your html:
<table ng-controller="videoController">
<tr ng-repeat="x in names">
<td><a id="myLink" href="#" ng-click="play(x);">{{ x.VodName }}</a></td>
<td>{{ x.Stream }}</td>
<td>{{ x.ReplayTime }}</td>
<td>{{ x.Duration }}</td>
<td>X</td>
</tr>
</table>