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>
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
I have one problem with angular ng-repeat and bootstrap. I tried divide view on two parts left image, right description, but next line oposite, left description and right image. I would like something like picture below
<div class="container">
<div class="row">
<div ng-repeat="item in items">
<div class="col-xs-6">
<img src="{{item.image}}" alt="#"/>
</div>
<div class="col-xs-6">
<div class="description">
<p>{{item.description}}</p>
</div>
</div>
</div>
</div>
</div>
You can check for odd or even iteration in the repeat loop and apply your class with either float left or right respectively.
<div class="container">
<div class="row">
<div ng-repeat="item in items" ng-class-odd="'img-left'">
<div class="col-xs-6 img-holder">
<img src=".." alt="#"/>
</div>
<div class="col-xs-6 text-holder">
<div class="description">
<p>........</p>
</div>
</div>
</div>
</div>
</div>
CSS
.img-left .img-holder{
float:left;
}
.img-left .text-holder{
float:right;
}
you can handle even condition directly in CSS or like above.
This is my solution. Using ng-class we check if the current index ($index) divided by 2 is zero then we add the float classes either .left or .right.
JSFiddle Demo
<div ng-controller='MyController'>
<div ng-repeat="val in arr">
<div class="row clearfix">
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'left':'right'">
{{val}}
</div>
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'right':'left'">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
</div>
</div>
</div>
Why doesnt the ng-disabled work in my code?
I have created a plunker.. any suggestions?
https://plnkr.co/edit/j2LnhLxBe5gHPITMqzUJ?p=preview
<ul ng-repeat="permission in permissions" ng-click="permission.assigned=!permission.assigned">
<a class="list-group-item" ng-class="{active: permission.assigned, disable: permission.name=='default'}">
<div class="row">
<div class="col-md-3">
<input type=checkbox aria-label="checkbox" ng-model="permission.assigned" ng-click="$event.stopPropagation()">
</div>
<div class="col-md-4">{{ permission.name }}</div>
<div class="col-md-6">{{ permission.description }}</div>
</div>
</a>
</ul>
Add the following to your input element - ng-disabled="permission.name === 'default'".
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>
Here i want to make a page numbering that increments everytime the ng-repeat increments but what i get is that the second ng-repeat index is always zero but using the index of the first ng-repeat works fine through $parent.$index how can this be solved?
here is the code sample :
<div ng-repeat="chapter in plan.chapters" class="export-page" >
<div ng-repeat="section in chapter.sections track by section.id" class="export-page" ng-init="sectionindex = $index">
<div class="header">
<br>
<h2 class="headerTitle">
<b>{{$root.selectedCompany.name + ' | ' + chapter.subject}}</b>
</h2>
</div>
<div class="content">
<h1><b>{{chapter.subject}}</b></h1>
<h2 class="chapter" >{{section.subject}}</h2>
<br>
<p ng-if="section.content_type === 'text'">
<div ng-bind-html="section.content.text"></div>
</p>
<p ng-if="section.content_type === 'table'">
<numeric-table model="section.content"
disable-editing="true"
hide-input-controls="true">
</numeric-table>
</p>
<p ng-if="section.content_type === 'aggregated-table'">
<aggregated-table model="section.selectedTables">
</aggregated-table>
</p>
<p ng-if="section.content_type === 'text-table'">
<free-text-table model="section.content"
disable-editing="true"
hide-input-controls="true">
</free-text-table>
</p>
<p ng-if="section.content_type === 'chart'">
<multi-chart model="section.content"
tables="section.selectedTables"
>
</numeric-table>
</p>
</div>
<div class="footer col-xs-12">
<div class="txt col-xs-11">copyright 2016# {{$root.selectedCompany.name}}</div>
<div class="pp col-xs-1 ">Page{{sectionindex}} </div>
</div>
</div>
</div>
<div ng-repeat="(index1 ,chapter) in plan.chapters" class="export-page" >
<div ng-repeat="(index2,section) in chapter.sections track by section.id" class="export-page" ng-init="sectionindex = $index">
Outer Repeat Index{{index1}}
Inner Repeat Index{{index2}}
</div>
</div>