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.
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 see during load that the scope element $scope.docDetails has the necessary data.
In the view when I use the ng-repeat to print info, I see that it is not displayed in browser.
<body ng-controller="documentUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div ng-repeat="row in documentUploadController.docDetails">
<div class="col-sm-2">{{row.DocumentTypeName}}</div>
<div class="col-sm-3 elementwrap">{{row.FileName}} </div>
..
</div>
</div>
WHen i view the HTML ,i see the ng-repeat code being commented out
Where am I going wrong?
Currently, your ng-repeat variable is $scope.docDetails
Since $scope already equals the controller, remove the controller reference in ng-repeat like <div ng-repeat="row in docDetails">
<body ng-controller="documentUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div ng-repeat="row in docDetails">
<div class="col-sm-2">{{row.DocumentTypeName}}</div>
<div class="col-sm-3 elementwrap">{{row.FileName}} </div>
..
</div>
</div>
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.
I try display in loop data but without repeating div with ng-repeat.
Example:
<div ng-repeat="item in widget" ng-include="includeFile(item.type)"></div>
Output:
<div class="ng-scope" ng-include="includeFile(item.type)" ng-repeat="item in widget">
data from template
</div>
<div class="ng-scope" ng-include="includeFile(item.type)" ng-repeat="item in widget">
data from template
</div>
I want output data in one div:
<div>
data from template
data from template
</div>
How can I do this in Angular?