We Keep Coding

AngularJS Array shows all ID of field every time on same index

I have a static array and I am trying to show a particular field of this array through ng-repeat, but my array shows every time the ID field on single index.
This is what my output screenshot looks like
You can find my code below,
function monthCalendarController($scope, $http, $rootScope, $filter, $location, WebService, CalendarEventService) {
$scope.eventSelected = function(event) {
var params = {
id: event.event.id
};
var url = $rootScope.url + '/v1/show_event';
var token = window.localStorage['token'];
var result = WebService.makeServiceCallHeader(url, params, $rootScope.POST, token);
result.then(function(response) {
if (response.status == 200) {
CalendarEventService.addEvent(response.data.event);
$location.path("/calendarEvent");
} else {
WebService.showAlert('Problem in Loading');
}
}, function(response) {
console.log('' + JSON.stringify(response));
});
};
$scope.persons = [
{ "id": 1, "name": "A", "select": true },
{ "id": 2, "name": "B", "select": true },
{ "id": 3, "name": "C", "select": true },
{ "id": 4, "name": "D", "select": true },
{ "id": 5, "name": "E", "select": true },
{ "id": 6, "name": "F", "select": true },
{ "id": 0, "name": "G", "select": true }
];
console.log($scope.counts);
$scope.selectDate = function(date) {
$scope.selectedDate = date.date;
$scope.showEventsDiv = true;
};
};
HTML
<div ng-controller="monthCalendarController">
<table class="table table-bordered monthview-datetable monthview-datetable">
<thead>
<tr>
<th ng-show="showWeeks" class="calendar-week-column text-center">#
</th>
<th ng-repeat="label in labels track by $index" class="text-center">
<small>{{label}}
</small>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows track by $index">
<td ng-show="showWeeks" class="calendar-week-column text-center">
<small>
<em>{{ weekNumbers[$index] }}</em>
</small>
</td>
<td ng-repeat="dt in row track by dt.date"
class="monthview-dateCell"
ng-click="select(dt.date)"
ng-class="{\'text-center\':true, \'monthview-current\': dt.current&&!dt.selected&&!dt.hasEvent,\'monthview-secondary-with-event\': dt.secondary&&dt.hasEvent, \'monthview-primary-with-event\':!dt.secondary&&dt.hasEvent&&!dt.selected, \'monthview-selected\': dt.selected}">
<div ng-class="{\'text-muted\':dt.secondary}" ng-click="selectDate(dt.date)">
<p ng-repeat="person in persons">
{{person.id}}!
</p>
{{dt.label}}
</div>
</td>
</tr>
</tbody>
</table>
<div ng-if="showEventDetail" class="event-detail-container" ng-show="showEventsDiv">
<div class="scrollable" style="height: 200px">
<div class="col-md-12 col-xs-12" style="font-size: 18px; padding-left: 15px;">
<i class="ion-calendar">
</i>{{selectedDate.date |date:\'MM/dd/yyyy\'}}
</div>
<div style="clear: both">
</div>
<div class="item item-divider event">
Events
</div>
<table class="table table-bordered table-striped table-fixed">
<tr ng-repeat="event in selectedDate.events" ng-if="selectedDate.events">
<td ng-if="!event.allDay" class="monthview-eventdetail-timecolumn cal-date-txt">
{{event.startTime|date: \'HH:mm\'}} {{event.endTime|date: \'HH:mm\'}}
</td>
<td ng-if="event.allDay" class="monthview-eventdetail-timecolumn">
All day
</td>
<td class="event-detail cal-date-txt day" ng-click="eventSelected({event:event})">
{{event.title}}
</td>
</tr>
<tr ng-if="!selectedDate.events">
<td class="no-event-label">No Events</td>
</tr>
</table>
</div>
</div>
</div>
Array always shows ID single index.
Can someone explain and help me ? I can still not figure out why.

On click of checkAll checkbox, push its objects in another array object and remove from existing array

Functionality I want to implement is that when I click on "select All" checkbox, I want to push the selected item in new array and delete from current one.
Tried with splice function, but not able to delete all items from the first table.
enter code hereHere is the sample plnkr I have created, So when I click on "select All" from first table, all its items should get pushed in "New Table" and at the same time removed from "First table(named Old table)

This will clear your array and push all entries in $scope.merged
$scope.pushlist = function(data){
for(var item of data){
$scope.merged.push({"name":item.name});
}
data.length=0
};

Use angular.copy to make an copy of the object
var app = angular.module("myApp", []);
app.controller("SecondCtrl", function($scope) {
$scope.merged = [];
$scope.data = [{
"name": "ABC",
"selected": false
}, {
"name": "HJK",
"selected": false
}, {
"name": "PQR",
"selected": false
}, {
"name": "LMN",
"selected": false
}];
$scope.selectall = function(checkAll) {
if (checkAll) {
$scope.merged = angular.copy($scope.data);
$scope.data.length = 0;
} else {
$scope.data = angular.copy($scope.merged);
$scope.merged.length = 0;
}
};
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="myApp" ng-controller="SecondCtrl">
<div>
<h1>Old Table</h1>
<table>
<thead>
<th>
<input type="checkbox" ng-click="selectall(checkAll)" ng-model="checkAll">Select All</th>
<th>Name</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>
<input type="checkbox" ng-model="item.selected">
</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div>
<h2>New Table</h2>
<table ng-show="merged">
<thead>
<th>Name</th>
</thead>
<tbody>
<tr ng-repeat="item in merged">
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Fiddle Demo

Dynamic result array need to bind with table with different layout using Angular JS

I have dynamic result of an array which need to bind with table but some different layout using Angular JS. I have tried many attempt but no success. I have require desired result. Helps are definitely appreciated.
var arr = [
{
"unique_id": "CS",
"college": "BSCS",
"arr_length": 1,
"program_section": [
{
"question": "How you rate your teacher",
"total": 135,
},
{
"question": "Are you satisfy with your teacher",
"total": 142,
},
{
"question": "Which course you have most like throughout the session",
"total": 135,
},
{
"question": "How much you have rate your instructor",
"total": 137,
},
]
},
{
"unique_id": "MBA",
"college": "BBA",
"arr_length": 2,
"program_section": [
{
"question": "How you rate your teacher",
"total": 175,
},
{
"question": "Are you satisfy with your teacher",
"total": 142,
},
{
"question": "Which course you have most like throughout the session",
"total": 165,
},
{
"question": "How much you have rate your instructor",
"total": 137,
},
]
},
{
"unique_id": "CA",
"college": "Account",
"arr_length": 1,
"program_section": [
{
"question": "How you rate your teacher",
"total": 145,
},
{
"question": "Are you satisfy with your teacher",
"total": 162,
},
{
"question": "Which course you have most like throughout the session",
"total": 125,
},
{
"question": "How much you have rate your instructor",
"total": 117,
},
]
}
];
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = arr;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1" ng-repeat="x in names">
<tr>
<td>Question</td>
<td>{{ x.college }}</td>
</tr>
<tr>
<td>
<table border="1" ng-repeat="y in x.program_section">
<tr>
<td width="100px">{{ y.question }}</td>
<td width="100px">{{ y.total }}</td>
</tr>
</table>
</td>
<td>
</tr>
</table>
</div>
Desired Result
<table width="200" border="1">
<tr>
<td>Question</td>
<td>CS</td>
<td>MBA</td>
<td>CA</td>
</tr>
<tr>
<td>How you rate your teacher</td>
<td>135</td>
<td>175</td>
<td>145</td>
</tr>
<tr>
<td>Are you satisfy with your teacher</td>
<td>142</td>
<td>142</td>
<td>162</td>
</tr>
<tr>
<td>Which course you have most like throughout the session</td>
<td>135</td>
<td>165</td>
<td>125</td>
</tr>
<tr>
<td>How much you have rate your instructor</td>
<td>137</td>
<td>137</td>
<td>117</td>
</tr>
</table>

You have to loop all elements for the table head and then again for your body. I used a fixed number to loop over your questions here. You can simply modify the filter, tho.
JSFiddle
HTML
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<thead>
<tr>
<td>Question</td>
<td ng-repeat="x in names">{{ x.college }}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in [] | range:4">
<td>
{{ names[0].program_section[n].question }}
</td>
<td width="100px" ng-repeat="x in names">
{{ x.program_section[n].total }}
</td>
</tr>
</tbody>
</table>
</div>
Javascript
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = arr;
}).filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++) {
input.push(i);
}
return input;
};
});

How to display the array of data inside table Using Angular.js ng-repeat

I am facing one issue.I need to display some array of data inside table using Angular.js.I am explaining my code below.
Table:
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<tbody>
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">id</td>
<td rowspan="2">email</td>
<td colspan="7">Order</td>
</tr>
<tr>
<td>Order Id</td>
<td>Status</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I am explaining my array of data below.
$scope.listOfData=
[
{
"date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
"id": "36",
"email": "raj#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 1111
},
{
"order_status": 0,
"order_id": 2222
},
{
"order_status": 1,
"order_id": 5555
}
]
},
{
"date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
"id": "37",
"email": "rahul#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 3333
},
{
"order_status": 0,
"order_id": 4444
}
]
}
]
I need to display above data into the table using Angular.js.please help me.

Run this code and check out the output. Let me know if you need different format.. cheers!!!
var app = angular.module("myApp",[]);
app.controller("AppController",['$scope',AppController]);
function AppController($scope) {
$scope.listOfData=[
{
"date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
"id": "36",
"email": "raj#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 1111
},
{
"order_status": 0,
"order_id": 2222
},
{
"order_status": 1,
"order_id": 5555
}
]
},
{
"date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
"id": "37",
"email": "rahul#gmail.com",
"order": [
{
"order_status": 1,
"order_id": 3333
},
{
"order_status": 0,
"order_id": 4444
}
]
}
];
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="AppController">
<table cellspacing="5px" style="border:1px solid black;">
<tr >
<th>Date</th>
<th>id</th>
<th>email</th>
<th>Order</th>
</tr>
<tr ng-repeat="orderInfo in listOfData">
<td>{{orderInfo.date}}</td>
<td>{{orderInfo.id}}</td>
<td>{{orderInfo.email}}</td>
<td>
<table>
<tr>
<th>Order stat</th>
<th>Id<th>
</tr>
<tr ng-repeat="orderStat in orderInfo.order">
<td>{{orderStat.order_status}}</td>
<td>{{orderStat.order_id}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
<!--
This is for table inside row.
<tr ng-repeat="orderInfo in listOfData">
<td>{{orderInfo.date}}</td>
<td>{{orderInfo.id}}</td>
<td>{{orderInfo.email}}</td>
<td>
<table>
<tr ng-repeat="orderStat in orderInfo.order">
<td>{{orderStat.order_status}}</td>
<td>{{orderStat.order_id}}</td>
</tr>
</table>
</td>
</tr> -->

Try this
<tr ng-repeat="(key,list) in listOfData">
<td ng-repeat="(key, lists) in list.order "> {{lists.order_status}}</td>
<td ng-repeat="(key, lists) in list.order "> {{lists.order_id}}</td>
</tr>

Make you header fixed of the table, put it outside of your loop.
Put this outside of the loop i.e ng-repeat
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">id</td>
<td rowspan="2">email</td>
<td colspan="7">Order</td>
</tr>
You don't want to create it for every item, as it's going to be fixed.
Now, iterate through your list of json objects, using ng-repeat, as explained above.
Something like this..
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<div ng-repeat="list in listOfData">
{{list.id}}
<div ng-repeat="oderlist in list.order">
{{orderlist.order_id}}
</div>
</div>
</table>
You can modify it accordingly.

This will help you,
<tr ng-repeat="item in listOfData">
<td>
<ul>
<li>
{{item.order}} // or print your array element there
</li>
</ul>
</td>

How to map JSON object to collapsed rows in ng-repeat

I have an JSON object coming from the database as one big object e.g:
$scope.totalsum =
{
"A1": 1155000,
"A2": null,
"A3": 2133,
"A31": 29292,
"A32": 2321,
"A33": 232342,
etc....
},
I need to have the A31 & A32 etc to populate a collapsed table data row. Here is the ng-repeat for object so far:
<tr ng-repeat-start="data in totalsum" ng-click="isRowCollapsed=!isRowCollapsed">
<td>
<input class="form-control" placeholder="{{data.total | number:2}}">
</td>
</tr>
<tr ng-repeat-end ng-show="data.breakdown.length>0" ng-hide="isRowCollapsed">
<td ng-show="data.breakdown.length>0">
<div class="subvalues" ng-repeat="subvalues in data.breakdown">
<input class="form-control" placeholder="{{subvalues.subtotal | number:2}}">
</div>
</td>
</tr>
<tr>
<td>
<input class="form-control" placeholder="{{getTotal('total') | number:2}}">
</td>
</tr>
I initially had the ng-repeat working for a JSON object like this:
$scope.totalsum = [
{
"total": 1155000,
"breakdown": null
},
{
"total": 233235000,
"breakdown": [
{
"subtotal": 22002020
},
{
"subtotal": 22002020
}
]
},

Well as far as I know you can use ng-repeat with (key, value) option to solve this:
<tr ng-repeat="(key, value) in totalsum">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>