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 .
HTML Code: active class not working here in the li tag
<ul class="list-group">
<li class="list-group-item" ng-class="{'active': isSelectedBookmark(bookmark.id)}" ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
<button ng-click="setEditedBookmark(bookmark); startEditing();" type="button" class="btn btn-link">
<span class="glyphicon glyphicon-pencil"></span>
</button>
{{bookmark.title}}
</li>
</ul>
javascript file:
$scope.bookmarks = [
{'id':0, 'title':"AngularJs", 'url':"http://angularjs.org", 'category':"Development"},
{'id':1, 'title':"Egghead.io", 'url':"http://angularjs.org", 'category':"Development"},
{'id':2, 'title':"HTML", 'url':"http://w3schools.com", 'category':"Design"},
{'id':3, 'title':"CSS", 'url':"http://w3schools.com", 'category':"Design"},
{'id':4, 'title':"JavaScript", 'url':"http://w3schools.com", 'category':"Development"}
];
$scope.editedBookmark = null;
function setEditedBookmark(bookmark) {
$scope.editedBookmark = angular.copy(bookmark);
}
function isSelectedBookmark(bookmarkId) {
return $scope.editedBookmark !== null && $scope.editedBookmark.id === bookmarkId;
}
$scope.setEditedBookmark = setEditedBookmark;
$scope.isSelectedBookmark=isSelectedBookmark;
How to make the active class working in this case?
I'm just starting out with AngularJS attempting to build a shopping cart.
Below is my code.
Items.html
<li id="{{item.id}}" ng-click="addItem(item)" class="menu-item" ng-repeat="item in items">
<span class="list-item-inner">
<span class="item-content">
<span class="vc-outer">
<span class="vc-inner">
<span class="list-item-title" style="color: #3F4B56; font-size: 1.1rem;"
ng-bind="item.name">
</span>
<span class="list-item-description" style="font-size: 0.9rem; color: #6B7781;" ng-bind="item.description">
</span>
</span>
</span>
</span>
</span>
<span class="item-price">
<span class="vc-outer">
<span class="vc-inner no-wrap"
ng-bind="'₦' + (item.price)"></span>
</span>
</span>
<span class="item-add"></span>
</li>
Cart.html
<li class="has-counter order-item" ng-class="{'has-modifier' : cart.length}" ng-repeat="item in cart">
<div class="counter-control-vertical is-editable">
<div class="controls"> <a href="" class="control ctrl-up" ng-click="incQty(item)" style="text-decoration: none;">
+
</a>
<a href="" class="control ctrl-down" ng-click="decQty(item)" style="text-decoration: none;">
–
</a>
</div>
</div>
<div class="oi-inner">
<div class="oi-details" ng-click="editModifiers(item)">
<div class="oi-quantity" ng-bind="(item.count) +'x'"></div>
<div class="oi-title" ng-bind="item.name"></div>
<div class="oi-modifiers"></div>
</div>
<div class="oi-price" ng-bind="'₦' + (item.price)"></div> ×
</div>
</li>
Cart.js
// Array containing my items.
$scope.itemData = <? php echo json_encode($item_array); ?> ;
$scope.cart = [];
$scope.deleteItem = function (item) {
var cart = $scope.cart;
var match = getMatchedCartItem(item);
if (match.count > 0) {
cart.splice(cart.indexOf(item));
return;
}
}
$scope.addItem = function (item) {
var match = getMatchedCartItem(item);
if (match) {
match.count += 1;
return;
}
var itemToAdd = angular.copy(item);
itemToAdd.count = 1;
$scope.cart.push(itemToAdd);
}
$scope.incQty = function (item) {
var match = getMatchedCartItem(item);
if (match) {
match.count += 1;
return;
}
}
$scope.decQty = function (item) {
var cart = $scope.cart;
var match = getMatchedCartItem(item);
if (match.count > 1) {
match.count -= 1;
return;
}
cart.splice(cart.indexOf(item), 1);
}
At the moment I can add, remove, increment and decrement items in the cart array and display them in realtime. But the price does not change based on qty.
My question is;
How can I calculate and display price based on qty of an item in cart?
How do I calculate total price of all the items in the cart array?
ng-bind="item.price * item.count"
I would call a function (witch calculates the total price) every time you change the cart and store the result in an new variable.
$scope.calcTotal = function() {
var total=0;
for (var i = 0, max = $scope.cart.length; i < max; i++) {
total += $scope.cart[i].price * $scope.cart[i].count;
}
$scope.total = total;
}
I have the following data:
$scope.AcctHistList = "[{"AcctHistID":13,"AcctID":6,"TranAmount":444,"TranDSC":"IncomeBill","UserDSC":"423142341","TXID":"ec9a8fb7-9f76-4671-f7c7-75a77c2a7a04","Created_D":"2015-09-14","Created_T":"08:00","Created_DT":"2015-09-14 08:00","Created_YM":"2015-09","Created_W":"37","Created_Y":"2015","Created_w":"Mo","AcctCurrency":"AED"}
,{"AcctHistID":12,"AcctID":6,"TranAmount":444,"TranDSC":"IncomeBill","UserDSC":"undefined","TXID":"eaec26e6-4dc1-41a3-e987-d27843cefed8","Created_D":"2015-09-14","Created_T":"08:00","Created_DT":"2015-09-14 08:00","Created_YM":"2015-09","Created_W":"37","Created_Y":"2015","Created_w":"Mo","AcctCurrency":"AED"}
,{"AcctHistID":11,"AcctID":6,"TranAmount":444,"TranDSC":"IncomeBill","UserDSC":"undefined","TXID":"16a323b3-0f11-4a18-e753-e4f262ace2ca","Created_D":"2015-09-14","Created_T":"08:00","Created_DT":"2015-09-14 08:00","Created_YM":"2015-09","Created_W":"37","Created_Y":"2015","Created_w":"Mo","AcctCurrency":"AED"}
,{"AcctHistID":10,"AcctID":6,"TranAmount":44,"TranDSC":"IncomeBill","UserDSC":"423141234","TXID":"bc5b4a80-0322-4e04-9bb4-5a82973c99a7","Created_D":"2015-10-11","Created_T":"09:12","Created_DT":"2015-10-11 09:12","Created_YM":"2015-10","Created_W":"40","Created_Y":"2015","Created_w":"Su","AcctCurrency":"AED"}
,{"AcctHistID":9,"AcctID":6,"TranAmount":44,"TranDSC":"IncomeBill","UserDSC":"423141234","TXID":"e8ba0ec2-e007-4925-94af-7cc038937aa3","Created_D":"2015-10-11","Created_T":"09:12","Created_DT":"2015-10-11 09:12","Created_YM":"2015-10","Created_W":"40","Created_Y":"2015","Created_w":"Su","AcctCurrency":"AED"}
,{"AcctHistID":8,"AcctID":6,"TranAmount":44,"TranDSC":"IncomeBill","UserDSC":"423141234","TXID":"d516756f-afc6-454b-c7d1-db55c474397f","Created_D":"2015-10-11","Created_T":"09:12","Created_DT":"2015-10-11 09:12","Created_YM":"2015-10","Created_W":"40","Created_Y":"2015","Created_w":"Su","AcctCurrency":"AED"}
]"
in the view i iterate through these data and group it using the user input(Day,Month,Week,Year,...).
<div class="panel panel-info" ng-repeat="group in AcctHistList | groupBy:AcctHistGropuBy | toArray:true | orderBy:'-$key'">
<div class="panel-heading">
<strong data-i18n={{group.$key}}>{{group.$key}}</strong>
<span class="label pull-right" ng-model="SumAmount = SumTranAmount(group)">
<span class="badge">{{SumAmount.In}}</span>
<span class="badge">-{{SumAmount.Out}}</span>
<span class="badge">={{SumAmount.Total}}{{SumAmount.Currency}}</span>
</span>
</div>
<div class="panel-body">
<ul class="list-group" ng-repeat="item in group">
<li class="list-group-item">
<h4 class="list-group-item-heading" data-i18n={{item.TranDSC}}>
{{item.TranDSC}}
</h4>
<span class="badge">{{item.Created_DT}}</span>
<span class="badge">{{item.TranAmount}} {{item.AcctCurrency}}</span>
<p class="list-group-item-text">{{item.UserDSC}}</p>
</li>
</ul>
</div>
The main problem is that, i want to summarize each group (to calculate TotalIn, TotalOut, and In-Out), So i wrote the function SumTranAmount for this.
$scope.SumTranAmount = function (group) {
var Total = 0, In = 0, Out = 0;
for (var i = 0; i < group.length; i++) {
Total = Total + group[i].TranAmount
if (group[i].TranAmount >= 0) {
In = In + group[i].TranAmount;
}
else {
Out = Out - group[i].TranAmount;
}
}
//return (In + " " + Out + " = " + Total + " " + group[0].AcctCurrency);
return { In: In, Out: Out, Total: Total, Currency: group[0].AcctCurrency };
}
Problem, an exception occured ng-model="SumAmount = SumTranAmount(group)"
So, my question is, how can i assign the output of the function to a variable and use this variable in the current loop??
can you help me with the index in the nested ng-repeat ? I can't find the right way to take the first 8 element of prodata, then the 8 following elements, then the 8 following elements...etc.
<ion-slide-box show-pager="true" does-continue="true" on-slide-changed="slideHasChanged($index)">
<ion-slide ng-repeat="s in [0,1,2,3,4,5,6,7,8,9]">
<ul>
<li ng-repeat="item in prodata | limitTo:8*s+8:8*s+0">
{{s}}
<a class="suggestPro" href="#">
<span><img ng-src="img/boards/{{item.imageName}}" /></span>
<p class="flex-caption"> {{item.model}} - {{item.name}}</p>
</a>
</li>
</ul>
</ion-slide>
</ion-slide-box>
Check your angular version. The ability to specify the begin argument has been added to 1.4 version of angular :
Extract from angular's change log :
limitTo: extend the filter to take a beginning index argument (aaae3cc4, #5355, #10899)
Your code wil be :
<li ng-repeat="item in prodata | limitTo:8:8*s">
The best way IMO would be to reformat the initial array to make it suitable for usage with ng-repeat. Example:
var getSplittedArray = function (array, numberOfElements) {
var newArray = [];
for(var i = 0; i < array.length; i += 1) {
if (i % numberOfElements === 0) {
newArray.push([]);
}
newArray[newArray.length - 1].push(array[i]);
}
return newArray;
}
// Example: var realArray = someService.get();
$scope.splittedArray = getSplittedArray(realArray, 8);
Example usage in the view:
<ion-slide-box show-pager="true" does-continue="true" on-slide-changed="slideHasChanged($index)">
<ion-slide ng-repeat="set in splittedArray">
<ul>
<li ng-repeat="item in set">
{{s}}
<a class="suggestPro" href="#">
<span><img ng-src="img/boards/{{item.imageName}}" /></span>
<p class="flex-caption"> {{item.model}} - {{item.name}}</p>
</a>
</li>
</ul>
</ion-slide>
</ion-slide-box>