I have an array that looks like the following:
I want to display that using angularJS ng-repeat, showing both count and value for each.
This is currently the HTML and angular I have but nothing displays.
I also don't need to display the 0 index in the array, I want to start from 1 if possible.
<tr ng-class="" ng-repeat="x in vm.data | filter: searchArray">
<td>{{x.value}}</td>
<td>{{x.count}}</td>
</tr>
I went back to the basics and understood that an ng-repeat is just a loop in javascript, and what do you need to do if you want to access data in JavaScript if your array is multi-dimensional? well you do a nested for loop, and thats exactly what I'm doing in this case.
This is the updated html/angularjs that displays the data I need:
<tbody>
<tr ng-repeat="x in vm.data">
<td ng-repeat="y in x">{{y.value}} {{y.count}}</td>
</tr>
</tbody>
Thank you guys again!
Related
JSFiddle here
<tr ng-repeat="item in schedule.days[0].entries" scope="row">
<th>{{item.name}}</td>
<td ng-repeat="x in schedule.days.entries">{{x.value}}</td>
</tr>
I am trying to create a dynamic table in angularjs. I got to a point where I am able to display the name and table row but in table data I am not able to bind the value object property. Can someone please guide me what I am doing wrong on my ng repeat. I have been stuck on this for two days now some guidence would be really appreciated. Thank you
You're trying to access schedule.days.entries, but days is an array, not an object. You're missing the index, e.g.
<td ng-repeat="x in schedule.days[0].entries">{{x.value}}</td>
https://jsfiddle.net/0xsv2aq3/
Edit:
I was just showing how to access the values. If you want to take the values for the same name in different days and show it in the table, you can do something like this.
https://jsfiddle.net/bray3gmd/
Try to present all data with ng-repeat from web service.
This is my controller JS (GetAllCtrl.js):
I get JSON data:
Now I want to get only company data without coupons data
(Company structure in JSON is: compName, id, email, coupons[])
In GetAllCtrl.js I have put the data in allComp variable.
This is GetAllCtrl.html:
I do ng-repeat in tr tag and use $index for loop on the array with data.
But in output, I get only 2 companies instead 4.
In clonsole.log I see 4 objects.
I'm new in AngularJS and JS and can't understand why it happened.
You are iterating over the wrong variable. It should be ng-repeat="c in getAllCtrl.allComp.data" and correspondingly change your td elements.
<tr ng-repeat="c in getAllCtrl.allComp.data track by $index">
<td align="center"><b>c.compName</b></td>
<td align="center"><b>c.id</b></td>
<td align="center"><b>c.email</b></td>
</tr>
I am trying to make an entirely dynamic angularJS page in such a way that the data-model and header-column-model can be passed in as JSON format and the angular/view can decode everything no matter how many columns, etc.
I have everything (Column Headers, single-Column sorting, multi-Column textbox filtering) working except the data portion where it looks like I want to nest {{bindings}}.
The idea is something like this:
<tr ng-repeat="item in model | filter:filters | orderBy:predicate:reverse">
<td ng-repeat="header in headers">{{{{$parent.item}}.{{header.colName}}}}</td>
</tr>
So that it would resolve to item.column (which is how this is done normally/statically).
However, there doesn't seem to be any embedding/nesting allowed for the double-squiggle references; aka. the first '{{' matches with the first '}}' automatically.
Is there a [good] way to do this?
Try using $eval:
<tr ng-repeat="item in model | filter:filters | orderBy:predicate:reverse">
<td ng-repeat="header in headers">{{$eval('item.' + header.colName}}</td>
</tr>
Here is a plunker showing that concept:
http://plnkr.co/edit/msGuMCCj477jyUAqjChz?p=preview
I have an angularjs application that basically takes JSON and creates a HTML table, with the keys in the <thead> and the values as table rows.
I have a JSFiddle here where I take the JSON and create table rows based on the values. But I can't figure out how to take the keys and align them with the values as table headers.
My angular code:
<tr ng-repeat='row in rows'>
<td ng-repeat="data in row.data">
{{data}}
</td>
</tr>
and:
function TableController($scope){
$scope.rows = data;
}
Take a look here: How can I iterate over the keys, value in ng-repeat in angular
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
====EDIT==== Since you're doing it all in the same table, you'll need to do it a different way. You need to separate the header values while you're still in the controller so that you have a clean way to iterate over your list. Here the fiddle: http://jsfiddle.net/L93v5/1/
Your revised way looks bad because there are two different tables and the cell sizes are different. This will keep it all in the same table and make things a bit cleaner.
I am listing a json data in table format.Json contains different arrays and need to loop these arrays seperately.Everything working fine except the $index value.
Working Plunkr
Here i am looping each array in seperate tr.i need to get the index value updated like 1,2,3..
Any solutions??
If you necessarily needs to have them iterated as two different arrays you'll have to add the total number of members in the first array to the indexes for the second array, like this:
<!-- second tbody: -->
<tbody>
<tr ng-repeat="prioritymembers in Records.priorityMembers">
<td class="no" ng-bind="Records.stdMembers.length + $index+1"></td>
<td class="name" ng-bind="prioritymembers.members.fname"></td>
</tr>
</tbody>
Working plunker: http://plnkr.co/edit/1HiGoMuFAOTyOpD3SLoX?p=preview
Interesting proble, I don't think there is a straitforward solution.
You could do
<tr ng-repeat="prioritymembers in Records.priorityMembers">
<td class="no" ng-bind="$index + Records.stdMembers.length + 1"></td>
...
</tr>
Perhaps the cleaner solution would be to create a single array in the controller and iterate over that, instead of having 2 <body>s with separate iterations.