I would like to ask how to use in right way inner ng-repeat inside of the outer ng-repeat:
It means taht u would like to use something like this:
<tr ng-repeat="milestone in order.milestones">
<td>{{milestone.id}}</td>
<td>{{milestone.milestoneTemplate.name}}</td>
<td>{{milestone.actual}}</td>
<td>{{milestone.estimate}}</td>
<td>
<span ng-repeat="milestoneTemplate in order.milestones.milestoneTemplate">
{{milestoneTemplate.warningAttributes.id}}
</span>
</td>
<td>{{ 'remove' | translate }}</td>
</tr>
Thanks for any advice.
Since milestone is already iterating over order.milestones in the top loop, simply do:
ng-repeat="milestone in order.milestones"
ng-repeat="milestoneTemplate in milestone.milestoneTemplate"
Related
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!
I have a JSON object which is a parsed representation of a CSV file. I wanted to display it in a tabular format, so I used ng-repeat twice:
<table class="table left">
<tbody>
<tr ng-repeat="invoice in invoices track by $index">
<td ng-repeat="data in invoice track by $index">
<div class="cell" ng-class="{ 'no-dealer': !isDealer(data) }">{{ data }}</div>
</td>
</tr>
</tbody>
</table>
This gets me what I want. However, now based on a specific value (which is a unique code) in the JSON objects, I want to apply the no-dealer class on that specific tr/td (doesn't matter). How can I acheive this.
The data is like this
ng-repeat create a new scope, so for using the functions from parent scope you will have to use it like this -
ng-class="{ 'no-dealer': !$parent.$parent.isDealer(data) }"
Two times $parent to reach the main scope of page
In my template I am doing the following:
<tbody>
<tr *ngFor="let h of heroes">
<td>{{ h.id}}</td>
<td>{{ h.name}}</td>
<td>{{ h.description}}</td>
<td>View</td>
</tr>
</tbody>
How can I make it so View is a link that navigates to /heroes/:id? I have this setup in my route config. I verified that it works by going to http://localhost:4200/heroes/1
Am I better off using the (click) event and calling a function such as viewHero(id). If I did this I wouldn't be sure how to pass the id. Also, if it can be done directly inside of the html template within the href tag or routerLink I would like to know how to do that too. My main problem seems to be accessing h.id inside of a string such as href="".
Update: I got the following to work, but still not happy with it:
<td><a (click)="viewHero(h)">View</a></td>
viewHero(hero) {
this.router.navigate(['/heroes', hero.id]);
}
There has to be a way to simply do this inside of the anchor tag directly. I am not getting a pointer finger when hovering the link.
Try this:
<tbody>
<tr *ngFor="let h of heroes">
<td>{{ h.id}}</td>
<td>{{ h.name}}</td>
<td>{{ h.description}}</td>
<td><a routerLink="/heroes/{{h.id}}">View</a></td>
</tr>
</tbody>
I am trying to use $index in an ng-repeat to dynamically add an index to my ng-model. I can't figure out how to type it so it shows up right.
This is the closest I've gotten, except the single quotes still show up:
<tr ng-model="arrayOfArrays" ng-repeat="x in exes">
<th>{{x}}</th>
<td ng-model="arrayOfArrays['{{$index}}'][0]">{{}}</td>
<td ng-model="arrayOfArrays['{{$index}}'][1]">{{}}</td>
<td ng-model="arrayOfArrays['{{$index}}'][2]">{{}}</td>
</tr>
What I want the end result to be:
<tr ng-repeat="x in exes">
<th>{{x}}</th>
<td ng-model="arrayOfArrays[0][0]">{{}}</td>
<td ng-model="arrayOfArrays[1][1]">{{}}</td>
<td ng-model="arrayOfArrays[2][2]">{{}}</td>
</tr>
I just want to know how to write the ng-model name so that the incrementing value of $index is included as part of the ng-model name. The only way I am getting the value to appear is by using extra single quotes that appear to become part of the ng-model name.
Couldn't you use
ng-repeat="(index, x) in exes"
Then index would be incremented with each "x" you go through. Also, you could use :
ng-repeat="x in exes track by $index"
This should increment $index as you currently have.
I want to do some arithmetic operation with $index in ng-repeat.
The following code is not working:
<tr ng-repeat="item in quotation.items track by $index">
<td class="text-center"><strong>{{$index++}}</strong></td>
<td>{{item.item}}</td>
<td>{{item.quantity}}</td>
<td>{{item.rate}}</td>
<td>{{item.rate * item.quantity}}</td>
</tr>
How can I solve this?
You need to use + 1. ++ always modifies the variable, and that never works well when you do that on a loop variable.
$index + 1
And this is the correct syntax for the ng-repeat. You don't need a by $index. $index is created automatically.
<tr ng-repeat="item in quotation.items">