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>
Related
<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>
I have the following:
<div class="row" ng-repeat="item in repo.items">
<div class="col-md-6 segment">
<div class="display-text animation editable">
<pre><span class="contenteditable"
tabindex="0"
contenteditable="true"
ng-model="item.text"></span></pre>
</div>
</div>
</div>
The 2-way binding isn't working for ng-model="item.text", but if I use the expression {{item.text}} within the same iteration it works as it should.
Any specific reason I'm missing which is causing this behavior?
ng-model used for input tag when you want to use only for view you should use ng-bind.
So you should use ng-bind="item.text" or {{item.text}} instead of ng-model="item.text" in span tag.
<pre>
<span class="contenteditable"
tabindex="0"
contenteditable="true"
ng-bind="item.text"></span>
</pre>
or
<pre>
<span class="contenteditable"
tabindex="0"
contenteditable="true">{{item.text}}</span>
</pre>
I have a ng-repeat inside a ng-repeat with a ng-include inside of the inner ng-repeat. Inside that ng-include, I want to access the outer ng-repeat with $parent. Here is my sample code:
index.html
<div ng-repeat="population in populations">
<div ng-repeat="person in population">
<div ng-include="person.url"></div>
</div>
</div>
one_person.html ("person.url" resolves to this)
<div> Your population id is {{ $parent.$index }}</div>
I am not able to access $parent.$index from that ng-include.
ngRepeat create scope so as ngInclude
Try like this
<div ng-repeat="population in populations">
<div ng-repeat="person in population">
<div ng-include="person.url" onload="parent=$parent.$parent"></div>
</div>
</div>
person.url
<div> Your population id is {{ parent.$index }}</div>
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.
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>