Access index of the parent ng-repeat from child ng-repeat - javascript

I want to use the index of the parent list (foos) as an argument to a function call in the child list (foos.bars).
I found a post where someone recommends using $parent.$index, but $index is not a property of $parent.
How can I access the index of the parent ng-repeat?
<div ng-repeat="f in foos">
<div>
<div ng-repeat="b in foos.bars">
<a ng-click="addSomething($parent.$index)">Add Something</a>
</div>
</div>
</div>

My example code was correct and the issue was something else in my actual code. Still, I know it was difficult to find examples of this so I'm answering it in case someone else is looking.
<div ng-repeat="f in foos">
<div>
<div ng-repeat="b in foos.bars">
<a ng-click="addSomething($parent.$index)">Add Something</a>
</div>
</div>
</div>

According to ng-repeat docs http://docs.angularjs.org/api/ng.directive:ngRepeat, you can store the key or array index in the variable of your choice. (indexVar, valueVar) in values
so you can write
<div ng-repeat="(fIndex, f) in foos">
<div>
<div ng-repeat="b in foos.bars">
<a ng-click="addSomething(fIndex)">Add Something</a>
</div>
</div>
</div>
One level up is still quite clean with $parent.$index but several parents up, things can get messy.
Note: $index will continue to be defined at each scope, it is not replaced by fIndex.

Take a look at my answer to a similar question.
By aliasing $index we do not have to write crazy stuff like $parent.$parent.$index.
Way more elegant solution whan $parent.$index is using ng-init:
<ul ng-repeat="section in sections" ng-init="sectionIndex = $index">
<li class="section_title {{section.active}}" >
{{section.name}}
</li>
<ul>
<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials">
{{tutorial.name}}
</li>
</ul>
</ul>
Plunker: http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info

You can also get control of grand parent index by the following code
$parent.$parent.$index

You can simply use use $parent.$index .where parent will represent object of parent repeating object .

$parent doesn't work if there are multiple parents. instead of that we can define a parent index variable in init and use it
<div data-ng-init="parentIndex = $index" ng-repeat="f in foos">
<div>
<div data-ng-init="childIndex = $index" ng-repeat="b in foos.bars">
<a ng-click="addSomething(parentIndex)">Add Something</a>
</div>
</div>
</div>

Related

How to bind a Controller's method in each of the item in ng-repeat?

<div uib-accordion-group class="panel-default" template-url="group-template.html" ng-repeat="item in myCtrl.Data">
</div>
Look at the above code snippet. I want to bind a method like myCtrl.update() in each item in the ng-repeat. So that later in the directive's scope I can invoke the method like item.update().
You can use ng-bind for that purpose.
<div uib-accordion-group class="panel-default" template-url="group-template.html" ng-repeat="item in myCtrl.Data">
<span ng-bind="yourMethod(item.Data)"></span>
</div>
Hope this will be helpful.
You can bind it as you do binding outside ng-repeat.
<div uib-accordion-group class="panel-default" template-url="group-template.html" ng-repeat="item in myCtrl.Data">
<button ng-click="myCtrl.update()"></button>
</div>

Pass content as object in angular-strap popover

I am trying to do the following:
I have a json array of questions which I pass like this:
<a href=""
...
title="Questions"
data-content="{{item.questions}}"
data-template="popover.question.tpl.html"
...
bs-popover>
{{item.questions.length}}
</a>
and a template 'popover.question.tpl.html' that contains the following code:
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content" ng-model="content">
<ul>
<li class="animate-repeat" ng-repeat="question in content">
{{question.text}}
</li>
</ul>
</div>
</div>
The problem is probably that the content is passed as a string by the directive, leading in the ng-repeat not working. If I just evaluate "{{content}}" I get the actual json data in my div but obviously I can't work with that. Any ideas on how to do that? Do I have to create a separate controller for that (which I would like to avoid)?
data-content will accept only string. So object cannot be passed through that.
Angular-strap popover will inherit the scope from where it is getting opened.
So, in your popover.question.tpl.html you can directly access item.questions.
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content" ng-model="content">
<ul>
<li class="animate-repeat" ng-repeat="question in item.questions">
{{question.text}}
</li>
</ul>
</div>
</div>
Check this plunker for working example.

Removing items based on values where an item can have multiple values

I have a system that lists an number of items from a database, these items can have three different states that can be attached to it, Manual, Auto and VIP. A single item in this list could be either of this states and sometimes two or all three at the same time.
The system also has three filters, Manual, Auto and VIP.
I am trying to build a system so that when a state has changed on a filter (box is checked/unchecked) the system will hide or show items from this list.
So i am struggling with this concept with my current implementation.
here is some code:
<ul class="content-list" id="update-list">
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="1">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #1 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #2 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="0"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="manual-circle">M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #3 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
I have three "data-" attributes attached to each list item, i wanted to use these to detect if the item show be displayed or not but i can't think of a simple way of doing this.
My other thought on the matter would be to add a class to each item saying if it is Manual, Auto or VIP for example
<li class="list-item manual auto vip">
I understand how to remove and display elements this way however it seems a little messy to me.
So what is the best way of achieving this using Jquery? I think i might be over engineering the whole thing.
Thanks for your time.
I think you might be looking for the attribute selector.
For example, when someone wants to see the "data-auto" items, you could do the following:
$("li[data-auto='1']").show();

Angular JS - ng-repeat and loop conditions

Hey i have this piece of code:
<div ng-repeat="i in values">
{{i}}
</div>
It works but i would like to put extra conditions inside the loop something like:
<div ng-repeat="i in values">
{{i}}
if(i !== 0){
<div></div>
}
</div>
How can i achieve this?
Use ng-if (or ng-show):
<div ng-repeat="i in values">
<div ng-if="i !== 0"></div>
</div>
Attached to the element, this will decide whether to display it or not.
Documentation for ng-if can be found here.
However, if you want to only do something if you are looping the first or last item, you can use $first and $last properties of ng-repeat as well. These are documented with ng-repeat. And can be used like this:
<div ng-repeat="i in values">
<div ng-if="$first"></div>
</div>
Use the ng-if statement
<div ng-repeat="i in values">
{{i}}
<div ng-if="i !== 0"></div>
</div>

AngularJS : Appending the same structure on the click of each item

My index.html page is like following:
<div id="sidepanel" ng-controller="myCtrl">
<ul class="drop-down">
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
</div>
<div id="mainpanel" ng-controller="listCtrl">
<div ng-view></div>
</div>
For this ng-view I have record-list.html to show all the records which is like following:
<div class="container">
<ul class="design">
<li id="{{record.name}}" ng-repeat="record in records">
<div>......</div>
</li>
</ul>
</div>
Now i want to add the same structure (as like each record) append on the click of each item of the side panel.
what is the logic for that ?
My recent UI Looks like this & i want to add the same structure on each click which should be append the existing structure.
Please Help.Thanks.
It sounds like perhaps each "record" has a set of children "records." If this is the case, I would recommend using angular's ng-switch directive to conditionally display the correct (or no) set of sub-records on the side.

Categories

Resources