Using Angularjs, I need to compare the value of $index to $parent.$index in a nested ng-repeat and set the value of the class according to this result. This is what I am currently trying-
<td ng-repeat="d in vm.users track by d._id"
ng-class="{showBottomLine : less, showSides : more, showBottomSideLine : equals }">
<div ng-if="$index < $parent.$index" ng-class="showBottomLine">less</div><!--ng-model="less"-->
<div ng-if="$index > $parent.$index" ng-class="showSides">more</div>
<div ng-if="$index === $parent.$index" ng-class="showBottomSideLine">equals</div>
</td>
The syntax for ng-class is as follows:
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
In your case
$parent.$index" ng-class="{'showSides': $index == $parent.index}">
Related
For some condition, I would like replace a String in my model when displaying it in html. I could do this my modifying my model, but is there a more idiomatic option? Possibly this should be done with a filter?
<tr ng-repeat="i in ctrl.data" >
<td>
<div ng-show="i.category == 'default'">
none
</div>
<div ng-show="i.category != 'default'">
{{ i.category }}
</div>
</td>
</tr>
{{ i.category == 'default' ? 'none' : i.category }}
Or, if you have that in several places, use a filter.
I am looking for the first index the passes through my ng-if condition which is not always $index === 0, and cant be solved using $first.
Here's my code sample:
<div class="ticket-event" ng-if="!item.hidden" ng-repeat="item in ctrl.event.items">
<div class="title item" ng-class="{'active': $index === $first}"></div>
</div>
I want to add a class in the first occurrence of item.
You don't have to check if $index is $first in:
<div class="title item" ng-class="{'active': $index === $first}">
Change it to:
<div class="title item" ng-class="{'active': $first}">
Why not do this via css?
Assuming "ticket -event" is a spelling mistake, and it should be "ticket-event", the css is straightforward:
.ticket-event div:first-child { // css here }
Here is what you need to do:
<div class="title item" ng-class='{active:$first}'></div>
<tr ng-class="{evaluationRow : $index==0 && item.HighlightBorder==true }" ng-repeat="item in items" >
<td>{{item.LearnerId}} </td>
<td>{{item.Name}}</td>
This has worked for me. Here I'm setting Css class for first element in ng-repeat only if a condition holds true otherwise 'No' Css class is applied.
In above example, "evaluationRow" is the name of Css class to apply, followed by a condition.
You can make use of $first
It will evaluate to true for the first element in ng-repeat
So your code should be
<div class="ticket-event" ng-if="!item.hidden" ng-repeat="item in ctrl.event.items">
<div class="title item {{$first?'active':'someotherclass'}}"></div>
</div>
This worked for me
<div class="title item" ng-class='{active:$first}'></div>
How to append expression variable on ng-repeat in Angularjs
My code:
<div class="col-md-9" ng-controller="AddOrderController">
<div class="owl-demo" class="owl-carousel" ng-repeat="t in [1,2]">
<div class="item" ng-repeat="d in datas.item{{t}}" >
<imagedata value="d"></imagedata>
</div>
</div>
</div>
Error this line: ng-repeat="d in datas.item{{t}}"
i have data.items1, data.item2 json data
how to declare datas.item{{t}} ?
you can't use an expression in this case, but you don't need to because the t variable is already available to you. just use ng-repeat="d in datas['item' + t]"
If this ng-repeat is throwing Duplicate Key in Repeater, you may have to modify it slightly to be ng-repeat="d in datas['item' + t] track by $index"
How about ng-repeat="d in datas['item'+t]"?
I am creating pagination buttons that call specific content through custom angular directives. These buttons are created via ng-repeat.
<div class="margin-less row">
<a ng-repeat="i in getNumber(9)" href="#/5-4-9_novena?day={{$index + 1}}">
<div class="small-1 panel-default columns pagination-panel" ng-if { ng-class="current: $index + 1 == date.weekday"}>
<h4 class="panel-title ">{{$index + 1}}</h4></div>
</a>
</div>
I attempted to use ng-if to add a class "current" on the pagination link that matches the link whose index matches {{date.weekday}}. However, to my disappointment I couldn't get it to add the class when the index matched the scope. Am I missing anything?
About ng-class you could use something like
<div class="small-1 panel-default columns pagination-panel" ng-class="{ current: $index + 1 == date.weekday}">
You don't need an ng-if to achieve that. Also, the ng-if syntax is completely different.
change ng-if { ng-class="current: $index + 1 == date.weekday"}
to
data-ng-class="{current: $index + 1 === date.weekday}"
For this case it's better to use ng-class:
ng-class="{current: $index == selected}"
For Both condition ng-if and ng-class
Change This:
<div class="small-1 panel-default columns pagination-panel" ng-if { ng-class="current: $index + 1 == date.weekday"}>
To:
<div class="small-1 panel-default columns pagination-panel" ng-if="$index + 1 == date.weekday" ng-class="{'current': $index + 1 == date.weekday }">
I have a unit test for an angular directive. This directive has a ng-repeat inside its template which is bound to an array inside the directive's controller. The array changes when a method in the controller is called (this method actually gets called by a sub-directive, something like addMe()).
This works fine in 'real-life', but does not inside a Jasmine unit test. I can see in the debugger, that everything is called and the array has the correct contents, but somehow the ng-repeat won't update. I even tried to call $scope.$digest() inside the controller after a change to the array, but that doesn't work either.
Any help?
Daniel
Relevant part of the template is:
<div class="step-wizard-header">
<div class="step"
ng-repeat="title in titles"
ng-click="selectPage($index, 0)"
ng-class="{ active: currentIndex == $index, done: currentIndex > $index }">
<span class="number">
{{$index + 1}}
</span>
<span class="title">
{{title.text}}
</span>
<div class="substep-holder"
ng-show="currentIndex == $index">
<div class="substep"
ng-repeat="sub in title.subs"
ng-click="selectPage($parent.$index, $index); $event.stopPropagation()"
ng-class="{ active: currentSubIndex == $index, done: currentSubIndex > $index }">
{{sub.text}}
</div>
</div>
<div class="right-arrow"
ng-style="{ 'z-index': (titles.length - $index) }">
</div>
</div>
</div>
The problem was caused by some incompatibility due to the version of ng-animate. Updating everything (to 1.2.13 at the moment) solved the issue.