I set up an ng-repeat to rollout a bunch of elements from a JSON file however I would like each element to have a incremental class name .item-1, .item-2, .item-3.
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ item.length }}"></span>
</div>
</div>
I would like to add the number to class="item-{{ item.length}}" but I can't seem to get this working.
I don't know what is the benefit of generating dynamic class names like this. A class should mean a class of similar objects.
It's still possible with $index:
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ $index }}"></span>
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngRepeat
As documented on https://docs.angularjs.org/api/ng/directive/ngRepeat just use $index
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ $index }}"></span>
</div>
</div>
Related
I have an issue with Drag and Drop with Angular JS on my Quiz
The code works fine if I just use one object simulated here by the index number i.e. as shown below myQuest[0].answers
ng-repeat="myQuestion in myQuest | limitTo: 5">
<p class="txt">{{myQuestion.question}} ?</p>
<li class=""
lr-drag-src="reorder" lr-drop-target="reorder"
ng-repeat="Answer in myQuest[0].answers ">
<img ng-src="{{ Answer.image }}">
{{Answer.id}}
</li>
<p class="txt">{{analysis}}</p>
<div class="feedback">
but fails when I use the code below which is required to move to next question i.e myQuest[$index].answers of the question to be answered
Symptoms: The Drag and Drop reorder image reorders by moving an answer to the next object /question and not the question been answered
ng-repeat="myQuestion in myQuest | limitTo: 5">
<p class="txt">{{myQuestion.question}} ?</p>
<li class=""
lr-drag-src="reorder" lr-drop-target="reorder"
ng-repeat="Answer in myQuest[$index].answers ">
<img ng-src="{{ Answer.image }}">
{{Answer.id}}
</li>
<p class="txt">{{analysis}}</p>
<div class="feedback">
I've tried track by $index on both parent and child ng-repeats to no avail
This fixed it thankyou lzagkaretos
ng-repeat="myQuestion in myQuest track by $index | limitTo: 5"
ng-init="**questionIndex** = $index" >
<p class="txt">{{myQuestion.question}} ?</p>
<li class=""
lr-drag-src="reorder" lr-drop-target="reorder"
ng-repeat="Answer in myQuest****[questionIndex]**.answers"
ng-init="answerIndex = $index" >
I have an ng-repeat inside another one and I am trying to find out the parents index.
Because it is being ordered after the fact, I can't do the typical
ng-repeat="(step_index, step) in flow"
Does anyone know why this would be happening?
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parent.$index }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
You can use ng-init="$parentIndex = $index" on your parent <li>, then call $parentIndex in the child ng-repeat
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'" ng-init="$parentIndex = $index">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parentIndex }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
I'm trying to create a two col layout with ng-repeat.
<div class="row">
<div class="col-md-6" ng-repeat="item in items">
Item: {{item}}
</div>
</div>
This results in the following problem:
P.S. This problem has been answered before with native CSS cols but I want to do it with bootstrap.
P.S. The solution proposed below is not working.. anyone got any other ideas please?
You'll have to break it into two seperate columns, but it should be pretty easy after that:
<div class="row">
<div class="col-md-6" ng-repeat="item in items | limitTo: items.length /2: 0">
Item: {{item}}
</div>
<div class="col-md-6" ng-repeat="item in items | limitTo: items.length /2: items.length /2">
Item: {{item}}
</div>
</div>
for that i'm taken two tables
keep bootstrap styles
<table> <tr ng-repeat="cl in codelist" ng-if="$index<codelist.length/2">
<td>{{$index}}</td>
</tr></table>
<table> <tr ng-repeat="cl in codelist" ng-if="$index>=codelist.length/2">
<td>{{$index}}</td>
</tr></table>
that it show order by ordey
1 3
2 4
5 6
like this
In short I have a list of div created with ng-repeat.
<div class="col-md-2-4" ng-repeat="card in cards">
<ul class="list-unstyled cs-tag-item-grp">
<li class="clearfix" ng-repeat="value in card.cardItem">
<div class="pull-left">
{{value.keys}}
</div>
</li>
</ul>
</div>
Which display something like this: Plunker
But is this possible to make them stacked something like this? :
I guess I have to dynamically set the positions and z-index for each div. But I'm not sure if this can be even possible and if so then how? This will be great if there is any solution for this.
If need jQuery/js it will be fine too.
I think you can make divs position absolute relatively to container and then use ngStyle directive like this:
<div class="col-md-2-4"
ng-repeat="card in cards.reverse()"
ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">
<ul class="list-unstyled cs-tag-item-grp">
<li class="clearfix" ng-repeat="value in card.cardItem">
<div class="pull-left">
{{value.keys}}
</div>
</li>
</ul>
</div>
So the key here is ngStyle expression:
ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}"
especially z-index part.
Demo 1: http://plnkr.co/edit/aDlptsf9JY1nYhEJpaVu?p=preview
Demo 2: Here is a demo from follow-up question with nice add/remove cards animations :)
http://plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview
The following would repeat across a list of cards, increase the z-index,top, and left all by 1 for each iteration, using $index as the reference for place of the current cards. Depending on how your cards need to be laid out, you may needs to do some cards.length - $index stuff to reverse it.
<div
ng-repeat="card in cards"
style="position:absolute"
ng-style="{'z-index':$index; 'top':$index+'px';'left':$index+'px'}">
</div>
Something along these lines should do what you want.
<div class="col-md-2-4" ng-repeat="card in cards" style="position: absolute; top:{{$index}}px; left:{{$index}}px; z-index: -{{$index}};">
<ul class="list-unstyled cs-tag-item-grp">
<li class="clearfix" ng-repeat="value in card.cardItem">
<div class="pull-left">
{{value.keys}}
</div>
</li>
</ul>
</div>
You can use the ng-style directive and the $index variable in conjuction:
<div class="col-md-2-4" ng-repeat="card in cards" ng-style="{'z-index': $index}">
<ul class="list-unstyled cs-tag-item-grp">
<li class="clearfix" ng-repeat="value in card.cardItem">
<div class="pull-left">
{{value.keys}}
</div>
</li>
</ul>
</div>
Which will make the z-index increment by 1 as you go down starting from 0.
I have object which contains question and list of choices. I'm display this object on the page using nested ng-repeats. When I'm trying to change 'question' everything changes just fine, but when I'm trying to change 'choice' nothing happens. Where is the problem?
My page:
<div class="panel">
<div class="row">
<div class="large-12 columns">
<h3>{{ title }}</h3>
<ol>
<li ng-repeat="q in quiz">
<input type="text" ng-model="q.question">
<ul class="remove-li-dots">
<li ng-model="choice" ng-repeat="choice in q.choices">
<input type="text" ng-model="choice" name="answer{{ q.id }}" >
</li>
</ul>
</br>
</li>
</ol>
<a class="button" ng-click="submitQuiz()">Submit</a><br>
{{ quiz }}
</div>
</div>
Screenshot of the page:
https://www.dropbox.com/s/i52fwq1os0cvcr9/repeat.png?dl=0
Problem is that choice is a string, so when you are changing it in child scope it is changing only in child scope.
To fix this - reference it by index in array ng-repeat="(choiceIndex,choice) in q.choices,ng-model="q.choices[choiceIndex]".
Also to prevent inputs from loosing focus when changing items - you will need to add track by $index in ng-repeat directive.
<ol>
<li ng-repeat="q in quiz">
<input type="text" ng-model="q.question">
<ul class="remove-li-dots">
<li ng-model="choice" ng-repeat="(choiceIndex,choice) in q.choices track by choiceIndex">
<input type="text" ng-model="q.choices[choiceIndex]" name="answer{{ q.id }}">
</li>
</ul>
</li>
</ol>
working example:
http://plnkr.co/edit/GJacjkzfT4FpfC6szsNk?p=preview
For better understanding how angular scopes works, I recommend reading this: https://github.com/angular/angular.js/wiki/Understanding-Scopes