I need to get the value of the 2D array on this code using ng-repeat.
<div ng-repeat="n in status">
<div ng-repeat="x in n track by $index">
{{n}}
</div>
</div>
my array is
$scope.status = [{1,2,4},{4,5,6,7},{8,9}];
right now i am getting the value of the array but with quotation and array bracket
["1","2","3"]
["4","5","6","7"]
["8","9"]
HELP PLEASE
Do you mean to display x? n is an array just as you're seeing.
<div ng-repeat="n in status">
<div ng-repeat="x in n track by $index">
{{x}}
</div>
</div>
Related
Lets say we have two ng-repeat (nested) in angularJS:
<div ng-repeat="animal of animals track by $index">
<div ng-repeat="name in names">
<p>{{$index}}</p>
</div>
</div>
In this example the $index would be the index of the child loop in names, but i want to have the index of the parent loop animals where i have the track by.
Why is this not working?
Try this.
<div ng-repeat="animal of animals track by $index">
<div ng-repeat="name in names">
<p>{{$parent.$index}}</p>
</div>
</div>
I want to access the index of dashboardCtrl.labels in dashboardCtrl.labelColors which is another array.I have tried the following but no success. If I print just {{$index}} it is getting printed successfully}}
<div class="row" ng-repeat="i in dashboardCtrl.labels">
<div id="circle" style="background:green"></div>{{i}}
<label>{{dashboardCtrl.labelColors[{{$index}}]}}</label>
</div>
You don't need nested brackets {{ }}. Try this
<div class="row" ng-repeat="i in dashboardCtrl.labels">
<div id="circle" style="background:green"></div>{{i}}
<label>{{dashboardCtrl.labelColors[$index]}}</label>
</div>
Do the following. Just $index in {{dashboardCtrl.labelColors[$index]}} instead of {{dashboardCtrl.labelColors[{{$index}}]}}
<div class="row" ng-repeat="i in dashboardCtrl.labels">
<div id="circle" style="background:green"></div>{{i}}
<label>{{dashboardCtrl.labelColors[$index]}}</label>
</div>
EDIT
Apply CSS style attribute dynamically in Angular JS
ng-style="{'background-color': dashboardCtrl.labelColors[$index]}"
I have two ng-repeats, one inside the other.
<table ng-repeat="all in values track by $index">
<tr ng-repeat = "errors in all track by $index">
// I want to use the $index of both ng-repeats
</tr>
</table>
I have to use the $index of both the ng-repeats. How can I distinguish one $index from the other?
When using $parent.$index for getting the parents index:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="data in parent track by $index">
<div ng-repeat="data1 in data track by $index">
{{$parent.$index}}:{{$index}}
</div>
</div>
</div>
</div>
Where myApp is:
angular
.module('myApp',[])
.controller('myCtrl',function($scope){
$scope.parent = [
['a','e','i','o','u'],
['a1','e1','i1','o1','u1'],
['a2','e2','i2','o2','u2'],
];
});
You can have a look at more details in this jsbin.
This is my controller
mode.controller("array_l",['$scope',function($scope){
$scope.items=[1,2,3,4,5];
//console.log( $scope.items);
}]);
This is my HTML
<div ng-controller="array_l" ng-repeat="item in items">
{{item}}
</div>
ng-repeat not showing any value
given controller and html
Move your ng-controller directive before your ng-repeat block.
Use track by $index in your ng-repeat to avoid problems with duplicate elements.
angular.module('mode',[])
.controller("array_l",['$scope',function($scope){
$scope.items=[1,2,3,1];
}]);
HTML:
<div ng-app="mode" ng-controller="array_l">
<div ng-repeat="item in items track by $index">
{{item}}
</div>
</div>
<div ng-repeat="item in items">
{{item}}
</div>
Defiantly worth reading through the Angular docs.
With something like the following:
<div class="row" ng-repeat="(k, v) in idata">
<div class="col-lg-6">
<h2>Network Bytes: {{k}}</h2>
<div class="chart" ts-rickshaw="v"></div>
</div>
</div>
Is there a way I could insert a row every X items (2 in this case since it is col-lg-6)? I'm aware I could probably change my data to be an array and do some logic in the controller. But ideally there should be a way to do this that keeps the view logic out of the controller.
I went with the ng-switch strategy suggested by #Skelly. However I modified it to make it more generic so I could avoid the code repetition for each column by adding a nested loop and referencing $parent.$index:
<div ng-repeat="i in fsdata track by $index" ng-init="rows = [1,2]">
<span ng-switch="" on="$index % rows.length">
<div class="row" ng-switch-when="0">
<div class="col-lg-{{12/rows.length}}" ng-show="fsdata[$parent.$index+$index]" ng-repeat="i in rows">
<h2>Disk: {{fsdata[$parent.$index+$index].name}} <small>({{fs_current[$parent.$index+$index].c_val | bytes}} / {{fs_current[$parent.$index+$index].total | bytes}}) {{fs_current[$parent.$index+$index].percent_used|number:0}}% Used</small></h2>
<div class="chart" max="{{fs_total[fsdata[$parent.$index+$index].name]}}" ts-rickshaw="fsdata[$parent.$index+$index].data"></div>
</div>
</div>
</span>
</div>
What about using $index and the modulus operator?
<div class="row" ng-repeat="(k, v) in idata">
<div class="col-lg-6">
<h2>Network Bytes: {{k}}</h2>
<div class="chart" ts-rickshaw="v"></div>
</div>
<div ng-if="($index != 0) && ($index % 2)">My Even Row</div>
</div>