I have an array with objects in it which I would like to sort within my ng-repeat, but no matter which field I get it doesn't seem to respond to anything.
I have the following array:
[{"title":"test 2","planId":"waUVOGARMUyScTYtHI2p_5cAEI_f","dueDate":"","status":0,"assigneePriority":"85868377FP","planTitle":"plan 2","ownerId":"3c9a3683-5057-4e28-b348-0e1f23157bec"},{"title":"Visit the VET","planId":"PyHP00vnzkqxyheVWMOqhZcAFU0F","dueDate":"21-02","status":0,"assigneePriority":"85868377E(","planTitle":"Groep_test23","ownerId":"5cfb5e90-c5d1-4c83-acca-d86e4b912a0c"},{"title":"test","planId":"waUVOGARMUyScTYtHI2p_5cAEI_f","dueDate":"","status":0,"assigneePriority":"85868376\\:","planTitle":"plan 2","ownerId":"3c9a3683-5057-4e28-b348-0e1f23157bec"}]
The controller code:
function getAllTasks() {
datacontext.graph.plannerGetAllTasks().then(function (tasks) {
datacontext.graph.plannerGetAllPlans().then(function (plans) {
var totalTasks = tasks.length;
for (var i = 0; i < totalTasks; i++) {
// append the plan name, owner Id to the tasks object.
var totalPlans = plans.length;
for (var j = 0; j < totalPlans; j++) {
if (plans[j].planId.indexOf(tasks[i].planId) != -1) {
tasks[i].planTitle = plans[j].title;
tasks[i].ownerId = plans[j].ownerId;
}
}
vm.tasks.push(tasks[i]);
}
changeListBucket(vm.currentTab);
});
});
}
and this is my html:
<div class="newsroom-tabs-bottom">
<a class="list-group-item newsItem-pointer" ng-repeat="task in vm.tasksToShow | limitTo: vm.amountOfTasksToShow | orderBy: task.planTitle">
<table style="width: 100%" class="dont-break-out">
<tr>
<td class="planner-icon-set-fixed-width default-text-colour">
{{$index + 1}}
</td>
<td style="width: 100%">
<span>
<span class="list-inbox-info-from-teamnews dont-break-out default-text-colour">{{::task.title}}</span>
</span>
<span class="list-inbox-info-subject dont-break-out default-text-colour">
{{::task.planTitle}}
<span style="float: right">{{ ::task.dueDate }}</span>
</span>
</td>
</tr>
</table>
</a>
</div>
I have checked the following post but none of the solutions worked for me. (Angular - Can't make ng-repeat orderBy work)
any help would be much appreciated. Cheers!
Jus use planTitle
<a class="list-group-item newsItem-pointer" ng-repeat="task in vm.tasksToShow | limitTo: vm.amountOfTasksToShow | orderBy: 'planTitle'">
Related
First let me start off that I am new to angular and TS but have been working with senior members of our team that think that this code is fine (simple getter in javascript).... Thanks is advance for your help!! If more info is needed let me know.
So here is my record definition in TS......
export class LabDefExp {
expID: number;
labID: number;
expTitle: string;
expNum: string;
numberOfExceptions: number;
get displayFullExpTitle(): string {
return '(' + this.expNum + ') ' + this.expTitle;
}
tags: secureNetReports.Tag[];
constructor(labDefExp?: secureNetReports.LabDefExp) {
if (labDefExp) {
for (var fieldName in labDefExp) {
this[fieldName] = labDefExp[fieldName];
}
}
}
}
export class Tag {
tagNum: string;
traditionalIt: boolean;
networkType: string;
exceptionReason: string;
modelType: string;
deviceStatus: string;
assetTypeId: string;
get traditionalDisplay(): string { return this.traditionalIt ? 'Yes' : 'No'; }
constructor(tag?: secureNetReports.Tag) {
if (tag) {
for (var fieldName in tag) {
this[fieldName] = tag[fieldName];
}
}
}
}
And here is the markup snippet...
<accordion-group ng-repeat="exception in labDefRptSumm.exceptions" class="row" ng-show="exception.expTitle" ng-hide="!exception.expTitle">
<accordion-heading>
<div class="row">
<div class="cell">
<span ng-bind="exception.displayFullExpTitle"></span>
( <span class="badge" ng-class="vm.getBadgeClass(exception.numberOfExceptions)" ng-bind="exception.numberOfExceptions"></span> Devices)
</div>
</div>
</accordion-heading>
<div ng-repeat="tag in exception.tags" class="row" >
<table cats-table ng-hide="exception.tags == null" id="tags" ng-cloak>
<thead>
<tr ng-show="exception.tags.length > 0">
<th>SecureNET Tag</th>
<th>Device Type</th>
<th>Status Name</th>
<th>Traditional Device?</th>
<th>Exception Reason</th>
<th>Network Type</th>
<th class="icons">
</th>
</tr>
<tr style="text-align: center" ng-show="exception.tags.length == 0">
<td>
<h4>No devices match your search criteria.</h4>
</td>
</tr>
</thead>
<tr ng-repeat="tag in exception.tags | filter:searchID">
<td ng-bind="tag.tagNum"></td>
<td ng-bind="tag.modelType"></td>
<td ng-init="sn=tag.deviceStatus">
<span class="badge"
ng-class="{ 'active': sn.indexOf('Active') == 0,
'inactive': sn.indexOf('Inactive')==0,
'parts-only': sn.indexOf('Parts Only')==0,
'surplus': sn.indexOf('Surplus')==0,
'return-visit': sn.indexOf('Return Visit')==0}"
ng-bind="tag.deviceStatus"></span>
</td>
<td ng-bind="tag.traditionalDisplay"></td>
<td ng-bind="tag.exceptionReason"></td>
<td ng-bind="tag.networkType"></td>
<td class="icons" nowrap>
<a class="btn btn-sm btn-primary" href="Import.aspx#/import/single/{{tag.assetTypeId}}/{{tag.tagNum}}">View</a>
</td>
</tr>
So when the call to properties displayFullExpTitle and traditionalDisplay are never fired if I go through dev tools (f12 on chrome) and set breakpoints? What am I missing that would cause this not to fire??
Any suggestions or comments would be appreciated.
Thanks
Use an angular filter instead of a getter function. I dont believe ng1 will call getters to update ng-bind values.
e.g I just wrote it in regular javascript
angular.module('something')
.filter('displayFullExpTitle', [function(){
return function(expDetail){
return '(' + expDetail.expNum + ') ' + expDetail.expTitle;
}
}]);
then in ng-bind you can do
<span ng-bind="exception | displayFullExpTitle"></span>
Below is my table markup
<tr ng-show="paginate({{$index+1}})" ng-repeat="x in ProductInfo_Pager | orderBy :sortType:sortReverse | filter:searchText | limitTo : rowPerPage" ng-class="$even?'table-danger':'table-info'">
<td>{{$index+1}}</td>
<td>{{x.Product}}</td>
<td>{{x.Location}}</td>
<td>{{x.Qty}}</td>
<td>{{x.UnitPrice | currency : '₹':2}}</td>
<td class="text-center">
<i class="fa fa-flag" aria-hidden="true" style="color:red" /> |
<i class="fa fa-bolt" aria-hidden="true" style="color:red" /> |
<i class="fa fa-users" aria-hidden="true"></i>
</td>
</tr>
and pager below it
<ul class="pagination">
<li class="page-item" ng-repeat="x in getNumber(rowPerPage) track by $index">
<a class="page-link" ng-click="pagerIndex=$index+1">{{$index+1}}</a>
</li>
</ul>
And AngularJs Code
$scope.ProductInfo_Pager = $scope.ProductInfo;
$scope.sortType = 'Product'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchText = ''; // set the default search/filter term ,
$scope.totalItems = $scope.ProductInfo.length;
$scope.currentPage = 1;
$scope.rowPerPage = 5;
$scope.pagerIndex = 1;
$scope.getNumber = function (num) {
var pages = $window.Math.ceil($scope.totalItems / num);
return new Array(pages);
}
$scope.paginate = function (rowindex) {
var begin, end, index, flag ;
index = $scope.pagerIndex;
end = (index * $scope.rowPerPage) - 1; // -1 to sync it with zero based index
begin = end - $scope.rowPerPage + 1;
if(rowindex >=begin && rowindex <= end ){
flag=true;
}
else{
flag=false;
}
var d = 0;
return flag;
};
paginate function() return true or false based on logic which is used in ng-show in tr tag with ng-repeat, but its not doing show , hide functionality as expected
Logic is :
Suppose rowPerPage is 5 - [5 row can be show up in table at a time]
And we click on 4 in pager so it should show row from 16-20 .
In ng-show paginate function is bind which take row index as parameter , this function check if rowindex falls in between 16 - 20 , if yes than it return true (ng-show=true) else false and accordingly should hide that row.
As per mu understanding its two way binding so any change in ng-show should work perfectly but it does not show any effect
Can someone help me why this is happening
I am a newbie in angularjs
Thanks.
Well ! ng-show is not working here and the function is not getting called at all written in ng-show !
If i correctly understand you want to create a pagination :
So i am giving you a very simple solution of pagination using a pagination filter .
you need to add this filter to your app :
app.filter('pagination', function() {
return function(input, start) {
start = +start; //parse to int
if (input != undefined && Object.keys(input).length > 0) {
return input.slice(start);
}
}
});
In your html :
<tr ng-repeat="x in ProductInfo_Pager | pagination: currentPage * rowPerPage | limitTo: rowPerPage|orderBy :sortType:sortReverse | filter:searchText" ng-class="$even?'table-danger':'table-info'">
<td>{{$index+1}}</td>
<td>{{x.Product}}</td>
<td>{{x.Location}}</td>
<td>{{x.Qty}}</td>
<td>{{x.UnitPrice | currency : '₹':2}}</td>
<td class="text-center">
<i class="fa fa-flag" aria-hidden="true" style="color:red" /> |
<i class="fa fa-bolt" aria-hidden="true" style="color:red" /> |
<i class="fa fa-users" aria-hidden="true"></i>
</td>
</tr>
In your pagination ul below your table :
<ul class="pagination">
<li class="page-item" ng-repeat="x in getNumber(rowPerPage) track by
$index">
<a class="page-link" ng-click="pagerIndex=$index+1">{{$index+1}}
</a>
</li>
</ul>
in your controller :
$scope.numberOfPages = function() {
if ($scope.ProductInfo_Pager != undefined) {
return Math.ceil($scope.ProductInfo_Pager.length /
$scope.rowPerPage);
}
};
Hope it work ! if any doubt please let me know .
I am using angularJs for developing an Hybrid Mobile App for IOS and Android. I am getting JSON data like :
[{"EventId":101,"Title":"No title","Date":"9/8/2015","Time":"12:00 AM","Location":""},{"EventId":120,"Title":"My First Event","Date":"9/15/2015","Time":"12:00 AM","Location":""}]
My question is that I have one button, click on that button I need to short my data based on current date. If i click on a button it should show me only that record that matched the current date.
I tried to follow this link but it is not working.
Code :
$scope.Schedule = [{"EventId":101,"Title":"No title","Date":"9/8/2015","Time":"12:00 AM","Location":""},{"EventId":120,"Title":"My First Event","Date":"9/15/2015","Time":"12:00 AM","Location":""}];
<ion-content>
<ul ng-repeat="member in Schedule">
<li class="item">
<div class="item" style="border-width: 0px; padding : 1px;">{{member.Title}}</div>
<div class="item" style="border-width: 0px; padding : 1px;">{{member.Location}}</div>
<div class="item" style="border-width: 0px; padding : 1px;">{{member.Time}}{{member.Date}}</div>
</li>
</ul>
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="list">
<a ng-click="setOrder()"> Show today's </a>
</div>
</ion-footer-bar>
Here's a working plnkr
Markup
<button ng-show="curDate == ''" type="button" ng-click="filterByCurDate()">Filter By Current Date</button>
<button ng-hide="curDate == ''" type="button" ng-click="curDate = ''">Clear Filter</button>
<table>
<thead>
<tr>
<th>EventId</th>
<th>Title</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="event in events | filter: {Date: curDate}">
<td>{{event.EventId}}</td>
<td>{{event.Title}}</td>
<td>{{event.Date}}</td>
</tr>
</tbody>
</table>
Controller Code
$scope.curDate = '';
$scope.filterByCurDate = function() {
var now = new Date();
$scope.curDate = $filter('date')(now, 'M/dd/yyyy');
};
$scope.events = [...];
If you want to order records based on date field use orderBy predicate instead of filter
Asc order
<ANY ng-repeat="record in records | orderBy:'Date'">..</ANY>
Desc order
<ANY ng-repeat="record in records | orderBy:'-Date'">..</ANY>
Angular DOC: orderBy
You could try something like this:
var today = new Date(),
jsonData = JSON.parse('[{"EventId":101,"Title":"No title","Date":"9/8/2015","Time":"12:00 AM","Location":""},{"EventId":120,"Title":"My First Event","Date":"1/29/2016","Time":"12:00 AM","Location":""}]');
today.setHours(0,0,0,0); //we don't need time to compare
jsonData.forEach(function(entry) {
entry.Date = new Date(entry.Date);
if (entry.Date.valueOf()===today.valueOf()){
console.log("Pass: "+entry);
}
});
I want to applay css class on that row where MaxStockLevel Is greter than Balence
i had try this code
<tbody ng-repeat="i in products | filter:productFilter">
<!--<tr ng-class="{{i.MaxStockLevel > i.Balence ? 'danger' : 'danger'}} ">-->
<tr class="ng-class : i.maxstocklevel > i.Balence">
<td>{{i.Name}}</td>
<td>{{i.MinStockLevel}}</td>
<td>{{i.MaxStockLevel}}</td>
<td>{{i.Balence}}</td>
</tr>
</tbody>
Your syntax is a bit off:
<tr ng-class="{ 'myCustomClass' : i.maxstocklevel > i.Balence }">
(Also, "Balence" is spelled "Balance")
you should try the following line
<tr ng-class="{ 'YourClassName' : i.maxstocklevel > i.Balance }">
For more info about ng-class click here
ng-class takes a JavaScript object which maps class names to booleans, like so:
var app = angular.module('app', []);
app.controller('Main', function($scope) {
$scope.maxStockLevel = 50;
$scope.items = [];
for (var i = 0; i < 10; ++i)
{
$scope.items.push({ stockLevel: Math.random() * 100 });
}
});
.danger { background: red; }
<div ng-app="app" ng-controller="Main">
<div ng-repeat="i in items" ng-class="{ danger: i.stockLevel > maxStockLevel }">
Item {{ $index }}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
I am a UI developer and I am completely new to Angular, however, I understand jQuery. I have joined a new company and they use Angular JS with JAVA. I have been assigned a task over which I am banging head for the past few days. I've come under the scanner now.
Basically I have a table in .html page to which data is coming (Sorry, I am told that I would need atleast 10 reputation to post a screen shot). Now I want to other column in that table.
I have tried adding that column in columns_panel.js but still it is not coming in the grid by default.
I understand that my question is not clear over here, but trust me, even my Team lead is also not willing to disclose any thing.
Can any JS guru's be help to me?
<div columns-panel columns="columns" show-panel="showColumnsPanel"></div>
<table class="responsive">
<thead>
<tr>
<th>
</th>
<th class="isFlagged">
<div class="flag"></div>
</th>
<th ng-repeat="column in columns" ng-click="sortBy(column)" class="{{ column }}">
<a class="th-inner">
{{ column | translate }}
<span ng-show="isSortColumn(column)"
ng-class="{'sort-icon-desc': !isSortAscending(),
'sort-icon-asc': isSortAscending()}">
</span>
</a>
</th>
<!--<th class="toggle-columns-header">-->
<!--<a class="th-inner" ng-click="showColumnsPanel = !showColumnsPanel">+</a>-->
<!--</th>-->
</tr>
</thead>
<tbody>
<tr ng-repeat="dispute in disputes.currentPage"
ng-class="isSelected(dispute) ? '{{ dispute | disputeTrClass }} checked-dispute' : '{{ dispute | disputeTrClass }}'"
ng-click="goToDisputeDetails(dispute)">
<td ng-class="isNegative(dispute) ? 'select-dispute alert-corner' : 'select-dispute'" ng-click="$event.stopPropagation()">
<input id="select-dispute-{{ dispute.id }}" type="checkbox" ng-click="toggleSelectedDispute(dispute)" ng-checked="isSelected(dispute)" ng-disabled="!dispute.isFlaggable" ng-hide="!dispute.isFlaggable" />
<label for="select-dispute-{{ dispute.id }}" ng-hide="!dispute.isFlaggable"></label>
</td>
<td class="isFlagged" ng-click="toggleFlag(dispute, $event)">
<div ng-show="dispute.isFlaggable" class="flag {{ dispute.isFlagged ? 'flagged' : 'unflagged' }}"></div>
</td>
<td ng-repeat="column in columns" class="{{ column }}">
<div data-ng-switch data-on="column">
<div data-ng-switch-when="reason">
{{ dispute[column] }}
<span class="reason-code" ng-if="dispute.reason !== 'N/A'">{{ dispute.reasonCode }}</span>
</div>
<div data-ng-switch-when="status">
{{ dispute[column]=="Urgent Response Required"?"Response Required":dispute[column] }}
</div>
<div data-ng-switch-when="amount">
<div ng-if="isNegative(dispute)" class="negative">
-<span class="currency">$</span>{{ dispute[column] * -1 | number:2 }}
</div>
<div ng-if="isPositive(dispute)">
<span class="currency">$</span>{{ dispute[column] | number:2 }}
</div>
</div>
<div data-ng-switch-when="dateReceived">
{{ dispute[column] | translatedDate }}
</div>
<div data-ng-switch-when="respondBy">
{{ dispute[column] | translatedDate }}
</div>
<div data-ng-switch-when="respondedOn">
{{ dispute[column] | translatedDate }}
</div>
<div data-ng-switch-default>
{{ dispute[column] }}
</div>
</div>
</td>
<!--<td class="{{ columns[columns.length - 1] }}"></td>-->
</tr>
</tbody>
</table>
<!-- No Disputes To Display -->
<div disputes-table-empty></div>
<!-- Error Message -->
<div disputes-table-error></div>
<style type="text/css">
.status {
padding-left: 27px !important;
}
</style>
This is the Model
DisputeModule.value('Dispute', function (attributes) {
this.id = attributes.id;
this.amount = attributes.amount;
this.cancelDate = attributes.cancelDate;
this.cancellationNumber = attributes.cancellationNumber;
this.cancelZone = attributes.cancelZone;
this.cardDeposit = attributes.cardDeposit;
this.cardMemberName = attributes.cardMemberName;
this.cardNumber = attributes.cardNumber;
this.chargeAmount = attributes.chargeAmount;
this.chargeDate = attributes.chargeDate;
this.creditReceived = attributes.creditReceived;
this.dateReceived = attributes.dateReceived;
this.disputeNumber = attributes.disputeNumber;
this.description = attributes.description;
this.isFlaggable = attributes.isFlaggable;
this.isFlagged = attributes.isFlagged;
this.locationID = attributes.locationID;
this.merchandiseReturned = attributes.merchandiseReturned;
this.merchandiseType = attributes.merchandiseType;
this.merchantAccount = attributes.merchantAccount;
this.modeOfReturn = attributes.modeOfReturn;
this.originalCardNbr = attributes.originalCardNbr;
this.payeeLocationId = attributes.payeeLocationId;
this.payeeSENbr = attributes.payeeSENbr;
this.reason = attributes.reason;
this.reasonCode = attributes.reasonCode;
this.referenceNumber = attributes.referenceNumber;
this.reservationCanceled = attributes.reservationCanceled;
this.reservationCanceledDate = attributes.reservationCanceledDate;
this.stage = attributes.stage;
this.status = attributes.status;
});
This is the columns_panel.js
DisputeModule.directive('columnsPanel', function (BASE_URL) {
var defaultColumns = [
'disputeNumber',
'status',
'dateReceived',
'respondBy',
'respondedOn',
'type',
'reason',
'cardNumber',
'originalCardNbr',
'transactionDate',
'referenceNumber',
'resolution',
'merchantAccount',
'locationID',
'payeeSENbr',
'payeeLocationId',
'chargeAmount',
'amount'
];
var availableColumns = [
'disputeNumber',
'status',
'dateReceived',
'respondBy',
'respondedOn',
'type',
'reason',
'cardNumber',
'originalCardNbr',
'transactionDate',
'referenceNumber',
'resolution',
'merchantAccount',
'locationID',
'payeeSENbr',
'payeeLocationId',
'chargeAmount',
'amount'
];
var columns = defaultColumns.slice();
return {
templateUrl: BASE_URL + '/resources/views/columns_panel.html',
scope: {
columns: '=',
showPanel: '='
},
controller: function ($scope) {
function addColumn(column) {
var tmpColumns = $scope.columns.slice();
tmpColumns.push(column);
tmpColumns.sort(function (a, b) {
return $scope.availableColumns.indexOf(a) - $scope.availableColumns.indexOf(b);
});
updateColumns(tmpColumns);
}
$scope.columns = columns;
$scope.availableColumns = availableColumns;
$scope.isSelected = function (column) {
return $scope.columns.indexOf(column) > -1;
};
$scope.toggleColumn = function (column) {
var columnIndex = $scope.columns.indexOf(column);
if (columnIndex === -1) {
addColumn(column);
} else {
$scope.columns.splice(columnIndex, 1);
}
};
$scope.reset = function () {
updateColumns(defaultColumns.slice());
};
$scope.close = function () {
$scope.showPanel = false;
};
function updateColumns(newColumns) {
$scope.columns = columns = newColumns;
}
}
};
});
I want to add "chargeAmount" to appear in the grid/table
you must have another columns somewhere, this columns
<div columns-panel columns="columns" show-panel="showColumnsPanel"></div>
try to add to your directive datas (the columns).
they are called here
scope: {
columns: '=',
showPanel: '='
},
and gave to the directive scope here
$scope.columns = columns;
so in your controller try to see what you have in columns