Can I have two ng-repeat with two "track by index". For example:
<div ng-repeat="car in cars track by $index">
<div ng-repeat="wheel in car track by $index">
</div>
</div>
The first is $index, is it broke in second ng-repeat?
You can do it like this instead
<div ng-repeat="(carIndex,car) in cars">
<div ng-repeat="(wheelIndex,wheel) in car">
</div>
</div>
Related
I would like to know how to do the ngFor with two rows in angular flex layout.
<div *ngFor="let item of items">
<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap.xs="0">
<div class="item item-1" fxFlex="50%">
<div fxLayoutAlign="center" class="item-label">
{{item.name}}
</div>
<div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
</div>
<div class="item item-2" fxFlex="50%">
<div fxLayoutAlign="center" class="item-label">
{{item.name}}
</div>
<div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
</div>
</div>
<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap.xs="0">
<div class="item item-3" fxFlex="100%">
<div fxLayoutAlign="center" class="item-label">
{{item.name}}
</div>
<div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
</div>
</div>
</div>
Here its looping but each time its printing 3 values for every index. I would like to print index 0 value of first column, index 1 on second column and index 2 value on second row.
I've created for you an example on stackblitz, based on your requirements.
The correct way would be :
<div class="container" fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap.xs="0">
<!-- you can use ngClass to manage 'item-1' or 'item-2' style -->
<div class="item" fxFlex="50%" *ngFor="let item of items">
<div fxLayoutAlign="center" class="item-label">
{{item.name}}
</div>
<div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
</div>
</div>
The wrap/nowrap property on the fxLayout directive does everything, because childs are set with fxFlex="50%".
I put out fxLayout.xs to render it correctly on stackblitz.
Here is #angular/flex-layout documentation
Hope it helps ;-)
The "wrap" parameter in the "fxLayout" is used to wrap the child content with the help of "fxFlex"
It may be click photo and not add class inside the ng-repeat using AngularJS
<div class="resultitem" ng-repeat="a in vm.gettrustalbum">
<div class="result">
</div>
</div>
Add class demo inside the ng-repeat
Output:
<div class="resultitem" ng-repeat="a in vm.gettrustalbum">
<div class="result demo">
</div>
</div>
try this
<div class="resultitem" ng-repeat="a in vm.gettrustalbum">
<div class="result" ng-class="vm.classname"></div>
</div>
Load Class from your JSON array.
Assuming that you are having something unique in ur array
<div class="resultitem" ng-repeat="a in vm.gettrustalbum">
<div class="result" ng-class={"demo":a.unique}>
</div>
</div>
You can do some thing like this...
Share your array i will give u final answer
I have the following code:
<div ng-repeat="list in [[1,2,3,4], [1,2,3,4]] track by $index">
<div id="{{counter}}" ng-repeat="listChild in list track by $index">
{{listChild}}
</div>
</div>
I want to make counter be the number of the element but relative to the whole parent array. How can I make it work so the divs count continuously and not as two individual arrays. to be something like this:
<div>
<div id="1">
{{listChild}}
</div>
<div id="2">
{{listChild}}
</div>
<div id="3">
{{listChild}}
</div>
<div id="4">
{{listChild}}
</div>
</div>
<div>
<div id="5">
{{listChild}}
</div>
<div id="6">
{{listChild}}
</div>
<div id="7">
{{listChild}}
</div>
<div id="8">
{{listChild}}
</div>
</div>
The code below accounts for varied array lengths within the parent array. $scope.precedingCount tracks the rolling total up to the start of a given inner array
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.counter = 0;
$scope.data = [[1,2,3,4], ['a','b','c','d', 'e', 'f'], ['any', 'other', 'data', 'needed']];
$scope.precedingCount = {
0: 0
};
for(var i=1; i<$scope.data.length; i++) {
$scope.precedingCount[i] = $scope.precedingCount[i-1] + $scope.data[i-1].length
}
$scope.combinedIndex = function(oIndx, iIndx) {
return $scope.precedingCount[oIndx] + iIndx
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div ng-repeat="list in data track by $index" ng-init="outerIndex = $index">
<div id="{{combinedIndex(outerIndex, $index)}}" ng-repeat="listChild in list track by $index">
{{listChild}} - {{counter}} - {{outerIndex}} - {{$index}} - {{combinedIndex(outerIndex, $index)}}
</div>
</div>
<br />
<br />
<div>
The count of the previous indices: {{precedingCount}}
</div>
</div>
You could use an external variable that will keep the number of listChild
<div ng-repeat="list in [[1,2,3,4], [1,2,3,4]] track by $index">
<div id="{{counter}}" ng-repeat="listChild in list track by $index" ng-init="counter += 1">
{{listChild}}
</div>
</div
I am creating a website that would display multiple collapsible list (e.g. categories & sub categories), so far I have managed to create dynamic divs using ng-repeat but my problem is when toggling the collapse. In the second category, when trying to toggle to display/hide the list, it toggles the list on the first div instead.
HTML:
<div class="col-lg-9 col-sm-3 col-xs-12">
<div ng-repeat="cat in categories">
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-3">
<img src="http://placehold.it/75x75" class="img-circle center-block img-responsive" height="75" width="75">
</div>
<div class="col-lg-9 col-xs-8">
<b>
{{cat}}
</b>
</div>
</div>
<hr>
<div class="row" ng-repeat="item in items ">
<div class="col-lg-12 col-xs-12">
<p ng-click="toggleCollapse($index + 1)"><i class="fa fa-fw fa-arrow-circle-right"></i>
{{item}}
</p>
<div id="collapse{{ $index + 1}}" class="collapse collapse-checklist">
<div ng-repeat="c in checklist">
<p>Lorem Ipsum</p>
</div>
JavaScript:
$scope.toggleCollapse = function (ind) {
var collapseInd = ("#collapse" + ind);
$(collapseInd).collapse('toggle');
};
Now, I have identified that the problem is ng-repeat creates the div with the same ID(collapsei) which causes the function on the second div toggle the list on the first div instead.
My function works well in the first cat div, but on all other div, it still toggles the list on the first div. Can anyone help me fix my function so it would toggle the lists on its respective div?
Try this : You can avoid using ID by calling collapse on next div element. See below code
$scope.toggleCollapse = function (ind) {
$(this).next('div.collapse.collapse-checklist').collapse('toggle');
};
If you have some duplicate id by using ng-repeat, you should probably use it like this:
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
So, now you will see that key will be changed every-time. And making some custom id.
<tr ng-repeat="(key, value) in data">
<td id="myCustomId_{{key}}"> {{key}} </td>
<td> {{ value }} </td>
</tr>
you will get a unique id.
This method is listed in the docs: http://docs.angularjs.org/api/ng.directive:ngRepeat
As suggested by tudor-gergely.
Used angular approach.
<p ng-click="showChecklist = !showChecklist"><i class="fa fa-fw fa-arrow-circle-right"></i>
{{item}}
</p>
<div ng-show="showChecklist">
<div ng-repeat="c in checklist">
<p>Lorem Ipsum</p>
</div>
Thanks!
I have the following HTML:
<div class="row" ng-repeat="row in grid track by $index">
<div cell class="cell" ng-repeat="cell in row track by $index" ng-click="game.addItem($index, $index)">
{{cell.value}}
</div>
</div>
I need to track by index in the first ng-repeat and in the second, in order to pass them off to addItem(). What would be the best way to pass both of them?
I belieive you can do:
<div class="row"
ng-repeat="row in grid track by $index"
ng-init="$rowIndex = $index">
<div cell class="cell"
ng-repeat="cell in row track by $index"
ng-click="game.addItem($rowIndex, $index)">
{{cell.value}}
</div>
</div>
(Init might need to go on the outer div, can't recall as I sit here)
Although the question would beg, why can't you just use the cell and row, what do you specifically need the indexes for.
<div class="row" ng-repeat="row in grid track by $index">
<div cell class="cell" ng-repeat="cell in row track by $index"
ng-click="game.addItem(row, cell)">
{{cell.value}}
</div>
</div>