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]}"
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 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 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.
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>
I want to create a paragraph view at my application, where every 5 items display in a block, one under each other, and the next five in the next block;
Example:
<div style="display:inline-block">
<div style="display:inline-block">
<div style="display:block">1.-----</div>
<div style="display:block">2.-----</div>
<div style="display:block">3.-----</div>
<div style="display:block">4.-----</div>
<div style="display:block">5.-----</div>
</div>
<div style="display:inline-block">
<div style="display:block">6.-----</div>
<div style="display:block">7.-----</div>
<div style="display:block">8.-----</div>
<div style="display:block">9.-----</div>
<div style="display:block">10.-----</div>
</div>
</div>
So basically I need to do something ugly like 2 nested iterations, one advancing 5 elements at a time, and the other 1 element at a time.
Or an ng-if directive which is not available at the Angular version that I use.
Technically, you can use one ng-repeat to achieve it (without ng-if). Try something like this:
<div style="display:inline-block" ng-repeat="item in items">
<div style="display:inline-block" ng-show="$index % 5 == 0">
<div style="display:block">{{items[$index+0].content}}</div>
<div style="display:block">{{items[$index+1].content}}</div>
<div style="display:block">{{items[$index+2].content}}</div>
<div style="display:block">{{items[$index+3].content}}</div>
<div style="display:block">{{items[$index+4].content}}</div>
</div>
</div>
Demo: http://jsfiddle.net/kpgbx/