ng-repeat="question in questions"
{{$index+1}}
ng-repeat="option in question.choiceBeanList"
{{questionObj.questionId}} --> Here I have to get both data's
My question is how to get data in the second ng-repeat like below for loop example given.
For example:
for(i=0;i<=10;i++)
{
for(j=0;j<=5;j++)
{
console.log(i+"_"+j)
}
}
You can use ngInit for this
<div ng-repeat="innerList in list" ng-init="outerIndex = $index">
<div ng-repeat="value in innerList" ng-init="innerIndex = $index">
<span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
</div>
</div>
check the docs: https://docs.angularjs.org/api/ng/directive/ngInit
If you're just trying to get at the index, you can use $parent.$index
Json model
$rootScope.makes = [
{
name: 'BMW',
models: ['335i', 'M3', 'M4']
},
{
name: 'Mercedes',
models: ['C250', 'E350']
}
];
Nested ng-repeats
<ul ng-repeat="make in makes">
<li ng-repeat="model in make.models">
({{$parent.$index}},{{$index}}): {{make.name}} {{model}}
</li>
</ul>
Working example
Try this:
<div ng-repeat="question in questions">
<div ng-repeat="option in question.choiceBeanList">
{{questions.indexOf(question)}} // To get the index value of FIRST ng-repeat
{{$index}} // To get the index value of current ng-repeat
</div>
</div>
Hope it helps...!
You can just pass outer ng-repeat data like this
<div ng-repeat="question in questions">
<div ng-repeat="option in question.choiceBeanList">
{{$parent.$index+1}}_{{$index}}
</div>
</div>
Related
I'm trying to wrap an element in an ng-repeat loop if the item has specific values.
eg:
items={
{name:"AAA",cat:"1"},
{name:"BBB",cat:"2"},
{name:"CCC",cat:"1"},
{name:"DDD",cat:"3"}
}
...
<div ng-repeat="item in items">
{{item.name}}
</div>
will output:
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
Let's say I want to wrap items that have category=1.
required output:
<div class="wrapper">
<div>AAA</div>
</div>
<div>BBB</div>
<div class="wrapper">
<div>CCC</div>
</div>
<div>DDD</div>
Note that I already have a filter and an orderBy in my ng-repeat, so can't use that.
Any advice how to achieve that?
Many thanks
Edit: I can't use a class, I need a wrapper div.
It can be done just by using ng-class as follows-
function MainCtrl($scope) {
$scope.items=[
{name:"AAA",cat:"1"},
{name:"BBB",cat:"2"},
{name:"CCC",cat:"1"},
{name:"DDD",cat:"3"}
]
}
.wrapper {
background-color : #ccc;
width: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainCtrl as main">
<ul>
<div ng-repeat="item in items">
<div class="wrapper" ng-if="item.cat == 1">
{{item.name}}
</div>
<div ng-if="item.cat != 1">
{{item.name}}
</div>
</ul>
</div>
EDITS:
According to your edited Question this is best of my knowledge. Its implemented in above snippet.
<div ng-repeat="item in items">
<div class="wrapper" ng-if="item.cat == 1">
{{item.name}}
</div>
<div ng-if="item.cat != 1">
{{item.name}}
</div>
Note: if you dont want to use Class it can be done using id
<div ng-repeat="item in items" ng-class="{'wrapper' : item.category == 1}">
{{item.name}}
</div>
You don't need an extra div
AngularJS
How can i get first element and add class 'active' automatically .
There is 2 ng-repeat , I want get first group --> first item --> first element and add class.
<div class="first" ng-repeat="group in group ">
<div class="second" ng-repeat="item in items">
<div ng-class="{'active': selectedGame.id === prematchGame.id}"></div>
</div>
</div>
You can do like this:
<div ng-class='{active:$first}' > {{item.data}}</div>
If you want to make active only the first element of the first ng-repeat, then try:
<div class="first" ng-repeat="group in groups">
<div class="second" ng-repeat="item in items">
<div ng-class='{active: $first && $parent.$first}'>{{item.data}}</div>
</div>
</div>
Demo on JSFiddle
simple way if all you want is first element
<div class="first" ng-repeat="group in group">
<div class="second" ng-repeat="item in items">
<div ng-class="{'active': $index == 1}" ></div>
</div>
</div>
you can do same for other ng-repeat all will have different $index
Use $first to do check for the first element of ng-repeat : Fiddle
<div class="first" ng-repeat="group in group" ng-init="firstGroup = $first">
<div class="second" ng-repeat="item in items">
<div ng-class="{'active': selectedGame.id === prematchGame.id}" ng-class='{active: $first && firstGroup}'></div>
</div>
</div>
As I can access a specific property it is a nested ng-repeat this is my code:
<div ng-repeat="item in list">
<div ng-repeat="(key, value) in item">
{{key}}:{{value}}
</div>
</div>
So far so good, I want to do is get the value of a particular property to another action
with that, that is a comparison to something more like this:
<div ng-repeat="item in list">
<div ng-repeat="(key, value) in item">
<div ng-if="key.myProperty==1">
//My Code
</div>
<div ng-if="key.miProperty==2">
//My Code
</div>
</div>
</div>
My object is:
$scope.list = [{id:1,name:"name1",age:"22"},{id:2,name:"name1",age:"25"},{id:2,name:"name1",age:"25"}];
I want to get the value of age.
Any suggestions.
IF you just simply need the age value in the repeat, then you do not need the inner repeat, all you need is
<div ng-repeat="item in list">
{{item.age}}
</div>
Unless I am missing something here, you can simply just do this. Here's a fiddle for you - http://jsfiddle.net/7MhLd/1298/
So unless you need this to build dynamically off the data, you would just do :
<div ng-repeat="item in list">
id: {{item.id}}
age: {{item.age}}
name: {{item.name}}
</div>
I'm not quite sure what you're trying to say with key.myProperty because as was mentioned, key is a string. If you want to check if the age is a certain value you can do something like.
<div ng-if="key === 'age' && value === '1'">
How to increment init variable value in ng-repeat
<div ng-if="feedData.carouselMode == true" ng-init='start=0' ng-repeat="a in carousel_data">
<div class="owl-demo" class="owl-carousel" owl-carousel >
<div class="item" ng-repeat="(key, item) in a.carouselFeeds" ng-init="start=start+1">
{{start}}
<div ng-click="go('{{key}}', item.feedUrls.length, 'rtl')" ng-swipe-left="go('{{key}}', item.feedUrls.length, 'rtl')">
<img class="lazyOwl" ng-src="{{item.img}}" />
<span class="innersquare" image-ja="{{item.img}}">
<p ng-style="folderStyle">{{item.name }} </p> </span>
</div>
</div>
</div>
</div>
ng-init start=0 after increment start=start+1 in ng-repeat but no count only show 1.
This is because each ng-repeat has its own scope and each ng-init will just increase its own scoped variable. You can try access the parent scope with $parent.
In case you are looking for a continuous numeration try this
<div ng-controller="MyCtrl">
<div ng-repeat="a in ['a','b','c']" ng-init="current = $parent.start; $parent.start=$parent.start+3;">
<div ng-repeat="x in ['alpha','beta','gamma']">
{{current + $index}}
</div>
</div>
Where the +3 should be +[LENGTH OF INNER ARRAY].
http://jsfiddle.net/rvgvs2jt/2/
For your specific code it would look like this
<div ng-if="feedData.carouselMode == true" ng-init='current=$parent.start; $parent.start=$parent.start+a.carouselFeeds.length' ng-repeat="a in carousel_data">
<div class="owl-demo" class="owl-carousel" owl-carousel>
<div class="item" ng-repeat="(key, item) in a.carouselFeeds">
{{current + $index}}
<div ng-click="go('{{key}}', item.feedUrls.length, 'rtl')" ng-swipe-left="go('{{key}}', item.feedUrls.length, 'rtl')">
<img class="lazyOwl" ng-src="{{item.img}}" />
<span class="innersquare" image-ja="{{item.img}}">
<p ng-style="folderStyle">{{item.name }} </p> </span>
</div>
</div>
</div>
</div>
I guess you achieve this by simple {{$parent.$index}}
Update
As per comments
<div ng-controller="MyCtrl">
<div ng-repeat="a in one">
<div ng-repeat="x in two">
{{($parent.$index*two.length)+($index+1)}}
</div>
</div>
Controller:-
$scope.one= ['alpha','beta','gamma'] ;
$scope.two=['alpha','beta','gamma'];
Fiddle
You can be accessed with $index, check this code,
<div ng-app ng-controller="TestController">
<div ng-repeat="item in list">
<label>Input {{$index+1}}:</label>
<input ng-model="item.value" type="text"/>
</div>
{{list}}
</div>
and
function TestController($scope) {
$scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ];
}
AngularJS is giving $index variable. We can use it.
<ul>
<li ng-repeat="item in items">{{ $index + 1 }}</li>
</ul>
I'm using angular include to insert the html's in the page and below is the code for it.
RightNav.html
<div ng-switch on="page">
<div ng-switch-when="Games">
<div ng-include="'Games.html'"></div>
</div>
<div ng-switch-when="Music">
<div ng-include="'Music.html'"></div>
</div>
<div ng-switch-when="Videos">
<div ng-include="'Videos.html'"></div>
</div>
</div>
LeftNav.html
<ul>
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
JS
app.controller('Nav', function($scope) {
$scope.items = [
{
name : 'Music'
},
{
name : 'Videos'
},
{
name : 'Games'
}
];
$scope.page = $scope.items[0].name;
$scope.selectedItem = function(item) {
$scope.page = item.name;
}
})
I tried using ng-repeat in RightNav.html and it doesn't work what am i doing wrong here?
<div ng-switch on="page">
<div ng-repeat="item in items">
<div class="item.name" ng-switch-when="{{item.name}}">
<div ng-include="'{{item.name}}.html'"></div>
</div>
</div>
</div>
Demo : http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview
In your case you do not need ng-repeat. You can directly bind the expression to ng-include. Also when i tried ng-switch when part does not take expression. Also using the . notation for selected page as the ng-switch and ng-include creates new scope.
See my fiddle
http://plnkr.co/edit/dPILzsyFoWHfL3Urlso2?p=preview