ng-repeat shows another ng-repeat data - angularjs

Hi i am trying to show up 2 menu's
Deparments -> subdepartments
List item
onclick of "event" button
should show up. onclick of "dates", button
should show up.
Here the issue is both the 1) and 2) display in single menu though both the htmls are different. Where am i going wrong.Below is the code.
HTML:
<div class="tab" >
<div class="sidebar-top">
<ul class="nav nav-pills nav-justified">
<li class="active">Event</li>
<li>Date</li>
</ul>
</div>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<ul class="nav nav-sidebar">
<li class=" nav-active active"><i class="icon-home"></i><span>Dashboard</span></li>
<li class="nav-parent" ng-repeat="(key, value) in getdatewasedetails | groupBy: 'depatName'">
<i class="fa fa-link"></i><span></span>{{ key }} <span class="fa arrow"></span>
<ul class="children collapse" ng-repeat="subdept in value">
<li > {{ subdept.serviceName }} </li>
</ul>
</li>
</ul>
</div>
<div class="tab-pane" id="2a">
<ul class="nav nav-sidebar">
<li class=" nav-active active"><i class="icon-home"></i><span>Dashboard</span></li>
<li class="nav-parent" ng-repeat="(key, value) in getdatewasedetails| groupBy: 'month'">
<i class="fa fa-link"></i><span></span>{{ key | date:'MMMM' : 'UTC' }} <span class="fa arrow"></span>
<ul class="children collapse" ng-repeat="currDates in value">
<li > {{currDates.testDate | date:'longDate' : 'UTC'}} </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Resulted Json:
Angular JS:
$scope.lastVisit = function () {
var request = $http({
method: "get",
url: "dashboardServiceCall.php",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
/* Successful HTTP get request or not */
request.success(function (data, status, headers, config) {
z=0;
for(var x=0; x < data.length; x++){
if(data[x]['type'] == 3){
for(var g=0; g<data[x]['data']['dateWaseReportResForTests'].length; g++){
$scope.getdatewasedetails[z] = data[x]['data']['dateWaseReportResForTests'][g];
$scope.getdatewasedetails[z].testDate = new Date($scope.getdatewasedetails[z].testDate);
$scope.getdatewasedetails[z].category = data[x]['data']['panelName'];
$scope.getdatewasedetails[z].month = $scope.getdatewasedetails[z].testDate.getMonth();
z++;
}
for(var y=0; y<data[x]['data']['dateWaseReportResForGroups'].length; y++){
for(var d=0; d< data[x]['data']['dateWaseReportResForGroups'][y]['data']['dateWaseReportResForTests'].length; d++){
$scope.getdatewasedetails[z] = data[x]['data']['dateWaseReportResForGroups'][y]['data']['dateWaseReportResForTests'][d];
$scope.getdatewasedetails[z].testDate = new Date($scope.getdatewasedetails[z].testDate);
$scope.getdatewasedetails[z].category = data[x]['data']['panelName'];
$scope.getdatewasedetails[z].month = $scope.getdatewasedetails[z].testDate.getMonth();
z++;
}
}
}else if(data[x]['type'] == 1 ){
for(var g=0; g<data[x]['data']['dateWaseReportResForTests'].length; g++){
$scope.getdatewasedetails[z] = data[x]['data']['dateWaseReportResForTests'][g];
$scope.getdatewasedetails[z].testDate = new Date($scope.getdatewasedetails[z].testDate);
$scope.getdatewasedetails[z].category = data[x]['data']['dateWaseReportResForTests'][g]['serviceName'];
$scope.getdatewasedetails[z].month = $scope.getdatewasedetails[z].testDate.getMonth();
z++;
}
}else if(data[x]['type'] == 2){
for(var y=0; y<data[x]['data']['dateWaseReportResForGroups'].length; y++){
for(var d=0; d< data[x]['data']['dateWaseReportResForGroups'][y]['data']['dateWaseReportResForTests'].length; d++){
$scope.getdatewasedetails[z] = data[x]['data']['dateWaseReportResForGroups'][y]['data']['dateWaseReportResForTests'][d];
$scope.getdatewasedetails[z].testDate = new Date($scope.getdatewasedetails[z].testDate);
$scope.getdatewasedetails[z].category = data[x]['data']['dateWaseReportResForGroups'][y]['data']['groupName'];
$scope.getdatewasedetails[z].month = $scope.getdatewasedetails[z].testDate.getMonth();
z++;
}
}
}
}
$scope.leftNavMenu = $scope.getdatewasedetails;
});
}
Above two images show output.both the ng-repeats are rendering. i am not sure where am i going wrong.Any help would be great. thanks in advance.

Related

ng-show is not working with ng-repeat

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 .

AngularJs ng-class active not working

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?

Cart calculations in AngularJS

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;
}

anguarljs, ng-repeat, how can i assign the output of the function to a variable and use this variable in the current loop

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??

nested ngrepeat, get the index in the nested array

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>

Resources