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">
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'm new to angularjs, and trying this, but not sure why is it not working. I used quite a number of solutions found here, but none works.
Here is my array that is assigned to $scope.data_params
Here is my code in HTML:-
<tr ng-repeat="item in data_params">
<td>{{item.name}}</td>
Code in JS:-
$scope.data_params.push(result_params.dealers);
console.log($scope.data_params);
Any idea what went wrong?
From the looks of it your data_params is a 1 length array that houses a 10 length array with the objects you want. You need to repeat over the 10 length array, not the 1 length.
<tr ng-repeat="item in data_params[0]">
<td>{{item.name}}</td>
</tr>
It looks like your data is an array that contains an array of your items. Try ng-repeating on the inner-array:
<tr ng-repeat="item in data_params[0]">
<td>{{item.name}}</td>
It seems that you need to access to the 0 element,
Try:
<tr ng-repeat="item in data_params[0]">
<td>{{item.name}}</td>
Hope it helps,
You need to track by $index:
<tr ng-repeat="item in data_params track by $index">
<td>{{item.name}}</td>
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 am making a custom directive which will paginate and make my table sortable. I am trying to make it so that multiple data types will work with the sorting with no effort from the user. Here is my problematic html in my templateUrl:
<tr ng-repeat="row in cndPaginatedObject track by $index">
<td ng-repeat="data in row track by $index" ng-if="!isValidDate(row[cndTableHeaders[$index]])">
{{row[cndTableHeaders[$index]]}}
</td>
<td ng-repeat="data in row track by $index" ng-if="isValidDate(row[cndTableHeaders[$index]])">
{{row[cndTableHeaders[$index]] | date: cndDateFormat}}
</td>
</tr>
I would prefer to use ng-if as opposed to ng-show/hide because it would unnecessarily duplicate DOM elements with ng-show/hide and just not show them. I have tried both ways, but I get the same result either way. The content of columns with dates in them don't show up, but the td itself is still there taking up space. So, I end up having three headers for columns and more than three columns. As far as I was aware, ng-if is supposed to remove the entire element from the DOM.
here is my other code of significance:
scope.isValidDate = (data) => {
var timestamp = Date.parse(data);
return !(isNaN(timestamp));
}
As for cndPaginatedObject, it is just an array of objects with multiple strings contained within. Thank you for any help in advance!
UPDATE:
Just thought I would also add that the cndTableHeaders is literally the table headers. cndPaginatedObject uses the table headers as the keys to each of the values. This way they show up in the proper order in the table.
Two ways to do what you're doing better without the need to produce extra doms and looping a ng-repeat twice
A better way to do what you want to do is
<tr ng-repeat="row in cndPaginatedObject track by $index">
<td ng-repeat="data in row track by $index">
{{(!isValidDate(row[cndTableHeaders[$index]])) ? row[cndTableHeaders[$index]] : row[cndTableHeaders[$index]] | date: cndDateFormat}}
</td>
</tr>
Or add a span inside the with the ng-if logic
<tr ng-repeat="row in cndPaginatedObject track by $index">
<td ng-repeat="data in row track by $index"">
<span ng-if="!isValidDate(row[cndTableHeaders[$index]])>
{{row[cndTableHeaders[$index]]}}
</span>
<span ng-if="isValidDate(row[cndTableHeaders[$index]])">
{{row[cndTableHeaders[$index]] | date: cndDateFormat}}
</span>
</td>
</tr>
Alternatively you could create your own filter which checks if date is valid and then using the date filter to filter it.
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"