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>
Related
I have following code and try to use $index in delete function but it gives incorrect value of it.
<li ng-repeat="joinMember in data.teamMember | orderBy:'member.screenName || member.fname' ">
<div class="member-list-img">
<a ng-href="">
<img ng-src="{{joinMember.member.data.image ? (joinMember.member.data.imageType == 'avatar' ? '/public/images/avatars/' + joinMember.member.data.image : '/public/images/' + joinMember.member.data.image) : '/public/images/avatars/avatar-73.png'}}" width="100%" alt="{{joinMember.member.screenName ? joinMember.member.screenName : joinMember.member.fname + ' ' + joinMember.member.lname }}" />
</a>
</div>
<div class="member-list-cont">
<h4>
<a ng-href="#">
{{joinMember.member.screenName ? joinMember.member.screenName : joinMember.member.fname + ' ' + joinMember.member.lname }}
</a>
</h4>
<span>{{joinMember.created | date : "MMMM d, y"}}</span>
</div>
<div ng-if="data.canModify" class="membr-delete">
<a ng-href="">
<i class="fa fa-trash text_link" aria-hidden="true" ng-click="deleteTeamMember($parent.$index, joinMember.id)"></i>
</a>
</div>
</li>
That's because the directive ng-if creates a new scope for itself, when you refer to $parent, it access the immediate $parent's scope, i.e., the inner repeat expression's scope.
So if you want to achieve something you wanted like in the former, you may use this:
<div ng-repeat="i in list">
<div ng-repeat="j in list2">
<div ng-if="1">
({{$parent.$parent.$index}} {{$parent.$index}})
</div>
</div>
</div>
if you have more than one inner directives, you can use ng-init for storing $index in a variable for references in child scopes.
<div ng-repeat="i in list" ng-init="outerIndex=$index">
<div ng-repeat="j in list2" ng-init="innerIndex=$index">
<div ng-if="1">
({{outerIndex}} {{innerIndex}})
</div>
</div>
</div>
So try $parent.$parent.$index in your example and please check understanding the scopes
You are using $parent.$index in a div that have ng-if tag. which delete dom element(div) if condition is fall so that case you will receive incorrect $index value. but with ng-show it only add hide class to that div.
So try to ng-show if it is not important to remove div element instead just hide it.
Note:- You are also using orderBy filter in ng-repeat which will sort in only your DOM so if you will find incorrect object value in your controller.
As you can see in the official documentation of angularjs you should get a zero-based index via $index within a ng-repeat. Try the example by angularjs here. Try to debug data.teamMember in your controller to make sure that this is the correct array you'd like to iterate.
What i'm trying to do is similiar to an accordion.
Simple put
i have an ng-repeat with an <a> tag that once clicked show another div called "Printpanel" nested inside it within ng-show.
If the user cick to another <a> tag, i want to hide all other div showed before, and open only to that one related.
I am using $index to trigger the specific div.
Here what i have done:
<div ng-repeat="product in $ctrl.Products">
<a href="#" ng-click="showDetails = $index;>CONFIGURE</a>
<div class="Printpanel ng-hide" ng-show="showDetails == $index" ng-hide="showDetails != $index">
</div>
it seems that ng-hide is not recognized... Anybody have an idea?
You don't need to use ngShow + ngHide: one is enough.
<div class="Printpanel ng-hide" ng-show="showDetails == $index">
You can use ng-if also:
<div class="Printpanel" ng-if="showDetails == $index">
EDIT:
due to scope inheritance problem, you are not able to set showDetails variable. use $parent for that.
working example:
<div ng-repeat="product in $ctrl.Products">
CONFIGURE
<div class="Printpanel" ng-if="$parent.showDetails == $index"> </div>
</div>
seems you have missed closing double quotes here ng-click="showDetails = $index;
Also either of one you need to use ng-show/ng-hide/ng-if = expression
I have a strings array in my controller that I iterates with ng-repeat in my view. I want the first element of the array with other color. How can I do this?
<div ng-repeat="lang in vm.language">
{{lang}}
</div>
You can use $first in your loop.
<div ng-repeat="lang in vm.language">
<span ng-class="{'some-css-class': $first}">{{lang}}</span>
</div>
You can use the ng-class directive with $first in your ng-repeat loop
<div ng-repeat="lang in vm.language">
<span ng-class="{first-element: $first}">{{lang}}</span>
</div>
And your css class may look like this
.first-element{
color: #CC0097;
}
Hope this will help you !!
Well there are two list options in my code - Monthly and quarterly
I have one class "active" which generally highlights the element.
I need class "active" should be applied to one of the options when they are clicked or selected. Here class=active is applied to only Monthly manually.
Looking for Angular solution for this.
<div class="list">
<p class="subheader secondary">Select Preferred View</p>
<ul class="tabs">
<li><a href="#monthly" ng-click="type='month'" data-ajax="false" **class=active**>Monthly</a></li>
<li>Quarterly</li>
</ul>
</div>
Use ng-class directive like in a code below.
<div class="list">
<p class="subheader secondary">Select Preferred View</p>
<ul class="tabs">
<li><a href="#monthly" ng-click="type='month'" ng-class="{'active' : type=='month'}" data-ajax="false" **class=active**>Monthly</a></li>
<li>Quarterly</li>
</ul>
</div>
It adds specified class when expression given after classname evaluates to true and removes it when it evaluates to false.
ng-class="{'classname' : expression}"
You can set a default value in a controller:
$scope.type = 'month';
or via ng-init directive on div:
<div class="list" ng-init="type='month'">
jsfiddle with example
jsfiddle with setting default in ng-init
I have something like that:
<div ng-repeat="element in data.arrayElement">
<strong>{{element.name}}</strong>
</div>
The previuos collection have 5 elements. Can i iterate the collection except the element that has the value 2?. I don't know, maybe like this
<div ng-repeat="element in data.arrayElement | filter:element.val() !== 2">
<strong>{{element.name}}</strong>
</div>
use ngIf because the
ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather than changing its visibility via the display css property.
<div ng-repeat="element in data.arrayElement" ng-if="element.val !== 2">
Just use a ng-hide on that value:
<div ng-repeat="element in data.arrayElement" ng-hide="element.val == 2">
collect
$scope.data = [
{name:'John', value:'1'},
{name:'Mike', value:'2'},
{name:'Alex', value:'3'}
];
html
<div ng-repeat="element in data | filter:{value:'!2'}">
<strong>{{element.name}}</strong>
</div>