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.
Related
I basically want to hide the header if there are no items in the loop:
<div class="header" ng-if="notifications.length">
<h3>Title</h3>
</div>
<div ng-repeat="item in notifications" ng-if="!item.read">Stuff</div>
Is it possible to do this inside the template?
Maybe not the most elegant way, but if you actually need it to be done inside template, you can use filter: https://docs.angularjs.org/api/ng/filter/filter
In your case it would be something like:
<div class="header" ng-if="(notifications | filter:read=false).length">
<h3>Title</h3>
</div>
Also, you can use filter in ng-repeat:
<div ng-repeat="item in notifications | filter:read=false">Stuff</div>
Also, you can define new array inside template, in parent of those div's. This will be probably most readable solution.
<div ng-init="unreadNotifications = (notifications | filter:read=false)">
<div class="header" ng-if="unreadNotifications.length">
<h3>Title</h3>
</div>
<div ng-repeat="item in unreadNotifications">Stuff</div>
</div>
Yes you use this inside the tempate
<ng-template [ngIf]="notifications.length">
<div class="header">
<h3>Title</h3>
</div>
....
</ng-template>
I struggle with very basic Angular stuff.
And I don't know exactly, what to search for.
Like this one:
<div ng-repeat="i in [1,2,3]">
{{i}}
</div>
<hr/>
The output is (as expected): <div>1</div>...<div>3</div><hr/>
What I actually want is: <div>1</div><hr/> <div>2</div><hr/> <div>3</div> (no hr after 3)
So like: 1 | 2 | 3
How can I do that?
Please note: No hr after the last div.
Please note: I cannot put the hr-tag into the div.
You just have to create a parent div wrapping the div and hr and also to hide the last hr, use a comparison check with $last
<div ng-repeat="i in [1,2,3]">
<div>{{i}}</div>
<hr ng-if="!$last" />
</div>
As #Vivz answered you can just wrap it in a parent div. If for some reason you cannot however, you can use the ng-repeat-start and ng-repeat-end directive:
<div ng-repeat-start="i in [1,2,3]">
{{i}}
</div>
<hr ng-repeat-end ng-if="!$last" />
You can put your ng-repeat at a level higher. For example:
<span ng-repeat="i in [1,2,3]">
<div>{{i}}</div>
<hr/>
</span>
The result will be:
<span>
<div>1</div>
<hr/>
</span>
<span>
<div>2</div>
<hr/>
</span>
<span>
<div>3</div>
<hr/>
</span>
Note: I used a span for the parenet, but you can use another HTML element, such as a div.
nr-repeat is directive in angular which can can used with html element or itself as a tag
<ng-repeat ng-repeat="i in [1,2,3]">
<div>{{i}}</div>
<hr ng-if="!$last" />
</ng-repeat>
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 an array of objects. I want to display two object per row. Something like:
<div class="row" ng-repeat="twoObject in objects>
<div class="col-sm-6">{{twoObject(1).name}}</div>
<div class="col-sm-6">{{twoObject(2).name}}</div>
</div>
As you know here {{towObject(1)}} is not valid code.
How can I achieve this in angularJS?
I have fixed this issue using the following trick:
<div ng-repeat="object in objects">
<div class="row" ng-if="$even">
<div class="col col-6">{{object[$index]}}</div>
<div class="col col-6">{{object[$index + 1]}}</div>
</div>
</div>
This is where I got it: Create Row every after 2 item in Angular ng-repeat - Ionic Grid
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?