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?
Related
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>
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.
I have an ng-repeat and only want to apply a style to the first div with the class type in the ng-repeat.
<div class="my-list" ng-repeat="item in list">
<div class="type">
<span>{{item.label}}</span>
</div>
<div class="check">
<span>{{item.ischecked}}</span>
</div>
</div>
I have tried the following but it applied the CSS to all the divs with a class of type
.my-list .type:first-child
You can use $first, that indicates the first iteration within a ng-repeat.
<div class="my-list" ng-repeat="item in list">
<div class="type" ng-class="{myClass:$first}">
<span>{{item.label}}</span>
</div>
<div class="check">
<span>{{item.ischecked}}</span>
</div>
</div>
Basically you need to do the other way around.
.my-list:first-child .type{
color:red;
}
ng-repeat will put multiple .my-list divs and you want to target the .type of the first div alone. So apply selector on .my-list.
I'm in the middle of learning Angular, and I am attempting to show or hide contents in a content div depending on side menu items being clicked.
<div id="side-menu">
<h3>Side Menu</h3>
<div ng-repeat="item in example">
<p ng-click="collapsed=!collapsed">
API Name: {{ item.name }}
</p>
</div>
</div>
<div id="content">
<h3>Content</h3>
<!-- What do I have to add here to "connect" to "item in example"? -->
<div ng-show="collapsed">
<p>Debug: {{ item.debug }}</p>
<p>Window: {{ item.window }}</p>
</div>
</div>
What do I have to add to controller ng-show from the other div?
Use $parent:
ng-click="$parent.collapsed=!$parent.collapsed"
Example: http://jsfiddle.net/cherniv/6vhH3/
Read this to understand the most important basics of Angular' scopes.