Change Index value in angular js - javascript

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.

Related

How do I display an array / object using ng-repeat

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!

angular-translate multiple keys in one element

In my application I am pulling translations keys from a single cell in a database table and displaying them dynamically in a setting page. Most will only have one key in the display object but there will be a number of entries that would have multiple.
Is there a way in angular-translate to have one element host multiple keys and translate them?
en.json={"title1":"balance","title2":"other stuff"}
ctrl.list=[{display:"title1 title2"}]
<tbody class="validation-table-body">
<tr ng-repeat="entry in ctrl.list">
<td class="validation-name" >
{{entry.display | translate}}
</td>
</tr>
</tbody>
displayed:
<td>title1 title2</td>
expected:
<td>balance other stuff</td>
I am just trying to get this to work before trying to add a comma or something to display.
This is possible in the translate directive at least:
<ANY translate="{{toBeInterpolated}}"></ANY>
toBeInterpolated is the name of the key to be looked up.
Ref:https://angular-translate.github.io/docs/#/guide/05_using-translate-directive

Adding additional table rows using Angular after using ng-repeat

New to angular, still working out the many kinks that I hit. I've got a question to pose to you all.
I currently have a table that is being populated on load with ng-repeat. The data itself is a bunch of sums of money. One particular entry, is a collection of those sums. I have an ng-onclick on it to run my function getLadders() when clicked. I would like it to basically pan out below wherever that element is in the chart, and create new rows of the data that is in that particular element.
A mini - drawing of the data it, as I can not paste the exact data.
ID Name Total
1 Single $20
2 Single $35
3 Combination $60***
4 Single $10
That is the current chart, with combination being the data with the many breakdowns within it. On click of that row, I want it to do something like this.
ID Name Total
1 Single $20
2 Single $35
3 Combination $60***
3.1 Single $20
3.2 Single $20
3.3 Single $20
4 Single $10
Basically, break out into everything inside that one piece. I have the function written with the extracted data, I have, right now, plain old jQuery to select that row, and append a tablerow after it, but it ends up attaching it to the end of the whole table instead of at that line.
Any help?
Also, for added benefits, I also have an icon on that row that I am looking to alter as well. It's a plus sign, that I want to be a minus sign when the data is being shown, and then back to a plus sign afterwards.
<tbody ng-controller="myCDsController">
<tr ng-repeat="holding in holdings" ng-if="holding.type !== 'Ladder'" data-type="{{holding.typeClass}}" data-id="{{holding.id}}">
<td>{{holding.type}}</td>
<td contenteditable="true">{{holding.name}}</td>
<td>{{holding.maturityDate}}</td>
<td>{{holding.amount | currency:"$"}}</td>
<td>{{holding.rate | percentage:2}}</td>
</tr>
<tr ng-repeat="holding in holdings" ng-if="holding.type == 'Ladder'" ng-controller="openLaddersController" data-type="{{holding.typeClass}}" data-id="{{holding.id}}">
<td><i ng-class="{'icon-dislike': !icon, 'icon-plus':icon}" ng-click="openLadders(holding.id)" >dfgh</i> {{holding.type}}</td>
<td contenteditable="true">{{holding.name}}</td>
<td>{{holding.maturityDate}}</td>
<td>{{holding.amount | currency:"$"}}</td>
<td>{{holding.rate | percentage:2}}</td>
</tr>
</tbody>
Here's some guidance based on what you have above. You should probably simplify the table structure into something like this:
<tbody ng-controller="myCDsController">
<tr ng-repeat="holding in holdings" data-type="{{holding.typeClass}}" data-id="{{holding.id}}">
<td><i ng-if="holding.type === 'Ladder'" ng-class="{'icon-dislike': !icon, 'icon-plus':icon}" ng-click="openLadders(holding)" >dfgh</i>{{holding.type}}</td>
<td contenteditable="true">{{holding.name}}</td>
<td>{{holding.maturityDate}}</td>
<td>{{holding.amount | currency:"$"}}</td>
<td>{{holding.rate | percentage:2}}</td>
</tr>
<tr ng-show="!icon" ng-if="holding.type === 'Ladder'>
<td colspan="5">
<table>
<tbody>
<tr ng-repeat="child in holding.children">
<td><!-- insert child content here --></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
There is probably a better way to handle the data-id / data-type attributes above, but I need more context.
Also, notice that I removed one of your controllers; I somehow doubt you need two controllers for this use case. Your controller should look something like this, probably:
app.controller('myCDsController', function(holding) {
$scope.openLadders = function() {
holding.children = getChildRows(holding)
}
})

Get key values and create a table header

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.

Knockout JS foreach looping through array of objects

I have a observableArray:
self.stats = ko.observableArray([
{"DFTD" : new Stat("Defensive TD", "DFTD",0,20,0,self.playerGroups[1])},
{"GL" : new Stat("Games Lost", "GL",0,16,0,self.playerGroups[2])},
{"FGA" : new Stat("Field Goals ATT", "FGA",0,100,0,self.playerGroups[0])},
]);
and i am trying to loop around it with a foreach and then print out the Stat objects name property which is the first element in that object.
<tbody data-bind="foreach: stats" id="stat-sliders">
<tr>
<td><span data-bind="text: stats.Stat().name"></span></td>
<!--/*<td class="statsListItem">
</tr>
</tbody>
Im not sure if im doing it right. I am a beginner with knockout and wondering if anyone can help?
The fiddle below creates an array of football stats, which contains a key field and a stat field. You could use the key field for quicker access if you like. If you want an object where you have the property be the key, that would allow for the quickest indexing, though its not an array then.
See if this is what you want.
http://jsfiddle.net/johnpapa/CgFjJ/
You shouldn't need to call back into stats. Notice that the span binds to the property of the model that is inside the array.
<tbody data-bind="foreach: stats" id="stat-sliders">
<tr>
<td><span data-bind="text: name"></span></td>
<!--/*<td class="statsListItem">
</tr>
</tbody>
Also, I don't think Knockout works well with keyed arrays like that.

Categories