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 }">
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 for loop in my MVC application like this
for(var i = 0; i < data.length; i +=2){
<div class='#(i== 0? "item active": "item")'>
<div>
#Html.Raw(data[i].Description)
</div>
<div>
#Html.Raw(data[i + 1].Description)
</div>
</div>
}
I want to convert the above code in angularjs.
Means every loop render the record from current and next array index, say i = 0 then render first and second record detail.
Actually it is big object, for clarity I reduce the code, I want to write the same code in ng-repeat
See the fiddle
I end up with a dirty trick:
<div ng-repeat="item in data"
ng-class="{active: $first}" class="item row"
ng-if='$index % 2 == 0'>
<div class='col-lg-6'>{{ item.a }}</div>
<div class='col-lg-6'>{{ data[$index + 1].a }}</div>
</div>
If $index % 2 == 0 only then render, means 0, 2, 4 .. it work as I want.
See to codepen.
You essentially want something like this:
<div ng-repeat="dataEntry in data" ng-class="{active: $first}" class="item">
<div>{{ dataEntry.Description }}</div>
<div ng-if="!$last">{{ data[$index + 1].Description }}</div>
</div>
Use ng-repeat to loop over your data entries
Use ng-class to only apply 'active' class to the first entry (you have access to $first, $last, $even, and $odd, (which are booleans) inside of an ng-repeat scope)
dataEntry represents each entry for each iteration of your data. Use {{ }} to access and render it's contents
You can use $index + 1 to grab the next entry in the array of entries.
I would assume you know that data in this scenario has to be attached / accessible from your $scope.
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}">
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>