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'm using a carousel that I should render 2 items in each ng-repeat cycle like this:
<div owl-carousel-item="" ng-repeat="item in (filteredItems = (items | filter:query))" class="item">
<a ng-href="/#/{{Page.Culture+'/live/'+item.id}}">
<div class="tv-show-box one-row">
<div class="tv-show-box-cover">
<ul>
<li>{{::item.name}}</li>
</ul>
</div>
<img ng-src="{{::item.image_name}}" width="220" height="148" alt="" class="img-responsive"/>
</div>
</a>
<--PART2: Item must go to next Item for this part -->
<a ng-href="/#/{{Page.Culture+'/live/'+item.id}}">
<div class="tv-show-box one-row">
<div class="tv-show-box-cover">
<ul>
<li>{{::filteredItems[$index + 1].name}}</li>
</ul>
</div>
<img ng-src="{{::filteredItems[$index + 1].image_name}}" width="220" height="148" alt="" class="img-responsive"/>
</div>
</a>
</div>
I means in Part2 define in code, I need to move to next item before ng-repeat is called again, I'm using $index+1 but it's not good for me,
I want to it to permanently move to next item not just accessing to it
Does it have something like item.Next() or something?
You could for example try something like this:
<tr ng-repeat="item in items" ng-if="$index % 2 == 0">
<td class="text-center">{{item.id}}</td>
<td class="text-center">{{items[$index + 1].id}}</td>
</tr>
it may be enough to do the trick for you :)
Edit:
For 3 items you could do:
<tr ng-repeat="item in items" ng-if="$index % 3 == 0">
<td class="text-center">{{item.id}}</td>
<td class="text-center">{{items[$index + 1].id}}</td>
<td class="text-center">{{items[$index + 2].id}}</td>
</tr>
I have an angular ng-repeat like bellow,
<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
</div>
This will create output like below,
<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
-----------------------
----------------- Etc.
</div>
But i need to repeat <div class="row" > also which contain two <div class="col-md-6" in each row.
This output needs like
<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
</div>
<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
</div>
<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
</div>
------- Etc
Is it possible to do with this usingng-repeat?
As mentioned in comment, if you want your row to repeat with each element in mydata, you would need to put ng-repeat on the <div> that contains row.
Its upto you to decide if you want to hardcode the inner <div> like this:
<div class="row" ng-repeat="data in mydata">
<div class="col-xs-6"> {{data.index}} </div>
<div class="col-xs-6"> {{data.value}} </div>
</div>
or use another ng-repeat on it.
<div class="row" ng-repeat="(index,data) in mydata">
<div class="col-xs-6" ng-repeat="i in data"> {{i}} </div>
</div>
Where mydata is an array of json with following structure:
$scope.mydata = [{index:0,value:'hello'},
{index:1,value:'hello1'},
{index:2,value:'hello2'}
]
here's the plunkr
UPDATE:
If you have data like following,
$scope.mydata = [{value:'hello0'},
{value:'hello1'},
{value:'hello2'},
{value:'hello3'}];
and you want to display it like
hello0 hello1
hello2 hello3
in the view, then you would need to make a check for elements occurring at even iterations and print elements at $index and $index+1. I used $even for the same. but you can also create a custom filter.
<div class="row" ng-repeat="data in mydata">
<div ng-if="$even">
<div class="col-xs-6" > {{mydata[$index].value}} </div>
<div class="col-xs-6" > {{mydata[$index + 1].value}} </div>
</div>
</div>
Heres the updated plunker
Create a directive:
angular.module(....)
.directive('myRows',function(){
return {
restrict : 'A',
template : '<div class="row"><div class="col-md-6" ng-repeat="(index,data) in mydata"><-- my content --></div></div>'
};
});
assumption here is that mydata is defined on the scope of the surrounding controller.
Use it in your html:
<div data-my-rows><div>
Yes ng-repeat is possible to do that.
Here is example code from my project
<tbody>
<tr ng-repeat="proj in projects>
<td>
{{proj.projectID}}
</td>
<td>
{{proj.projectName}}
</td>
<td>
{{proj.project.start date | date:'mediumDate'}}
</td>
<td>
{{proj.projectStatus}}
</td>
</tr>
</tbody>
I hope this would help
So, you now have two answers that correctly address your question and will produce the results you requested, but I wanted to give you some advice (albeit unsolicited) about your Bootstrap structure.
In Bootstrap, it is perfectly acceptable to not repeat your rows for every 12 grid units. In fact, if you want to use multiple responsive column classes together, such as using col-lg-4 and col-md-6 to produce 3 columns on large viewports and 2 on medium viewports, you cannot insert rows between your repeated content.
Since col classes use float and percentages, you don't have to worry about "terminating" the row. Elements will simply float next to one another up to 12 grid units and then start a new natural horizontal "row." That is how Bootstrap's responsive grid works.
You should use rows for two purposes:
To nest columns inside of columns. See my answer here for a
visual explanation of this topic. or
To create horizontal groups of columns. This has the purpose of grouping elements together and clearing column floats for subsequent columns.
What I'm saying is that your initial ng-repeat structure was better and will provide you with a more flexible outcome.
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>
As is my understanding of Angular, only one of the two following elements should be visible at a time, but for some reason, both are displaying. Is there a mistake in my code I just can't see?
Am I using ng-show incorrectly?
<div class="no_people" ng-show="!person.name">
<p>no people</p>
</div>
<div ng-repeat="person in details.people">
<div class="persons_table">
<table>
<tbody>
<tr class="top_row">
<td colspan="2">
<span class="person_name">
{{ person.name }}
</span>
<span class="person_address" >
{{ person.address }}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I think this way it should work:
<div class="no_people" ng-hide="details.people.length">
<p>no people</p>
</div>
The person variable is only accessible inside the ng-repeat.
And using ng-hide instead of ng-show=! is maybe a bit more cleaner.
As I can see, you need this:
<div class="no_people" ng-hide="details.people.length > 0">
<p>no people</p>
</div>