Sample problem
<div ng-app="" ng-init="names=['Jani']">
<ul>
<li ng-repeat="x in names " >
<div ng:model="a[$index]" >
<div ng:init="a{{$index}}='1'">
{{a0}}
</div>
</div>
</li>
</ul>
</div>
In above code, I can create dynamic ngModel variable. but I want to initiate value 1 to ngModel dynamically. Please help me
Related
I have the following code, I want to add 1 to the current index of the second Name, because if I don't, it will output the same name in a single line. How do I add to the current index of ngRepeat?
<ul id="speakerlist" ng-repeat="data in result">
<li>
<div class="col">
<h3>{{data.Name}}</h3>
</div >
<div class="col">
<h3>{{data.Name | $index+1}}</h3>
</div>
</li>
</ul>
I solved this by using jQuery, but I want to do it in angularjs way.
EDIT: additional info
var app=angular.module("myApp",[])
app.controller("myController",function($scope){
$scope.result=[{"Name":"Michael Jordan"},{"Name":"Kobe Bryant"},{"Name":"Kevin Durant"},{"Name":"Stephen Curry"} ];
});
The result I want Is:
Michael Jordan Kobe Bryant
Kevin Durant Stephen Curry
If I understand correctly, you want to display a li for every two items. You can do it something like this:
<ul id="speakerlist" ng-repeat="data in result">
<li ng-if="$even">
<div class="col">
<h3>{{result[$index].Name}}</h3>
</div >
<div class="col">
<h3>{{result[$index + 1].Name}}</h3>
</div>
</li>
</ul>
Of course you would also have to include some kind of check if the $index can reach the last one (if the collection has an un-even amount of items)
See this jsfiddle
You could even remove the double col html if you don't like duplicate html code:
<ul id="speakerlist" ng-repeat="data in result">
<li ng-if="$even">
<div class="col"
ng-repeat="item in [result[$index], result[$index + 1]]">
<h3>{{item.Name}}</h3>
</div >
</li>
</ul>
Try this code <h3>{{data.Name }} {{$index+1}}</h3> instead of your code
<h3>{{data.Name | $index+1}}</h3>
The result format looks like
Ramesh
Ramesh1
Rajendran
Rajendran1
I think you can make it simple this way.
var app=angular.module("myApp",[])
app.controller("myController",function($scope){
$scope.result=[{"Name":"hari"},{"Name":"ram"} ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<ul id="speakerlist" ng-repeat="data in result track by $index">
<li>
<div class="col">
<h3 >{{data.Name}} {{data.Name+1 }}</h3>
</div >
</li>
</ul>
</body>
">
Why don't you do this ?
<ul id="speakerlist" >
<li ng-repeat="data in result">
<div class="col">
<h3>{{data.Name}}</h3>
</div >
</li>
</ul>
This way you don't need to change de $index, it will be automatic
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>
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 have a div implementing infinite-scroll which is placed in a partial HTML page.this div has a implementation within it this ul is implementing ng-repeat for the items got through infinite-scrolln function implemented in a factory.this function is working fine on each scroll.but my is not getting rendered
here is that html
<div ng-controller="studentCareerList">
<div infinite-scroll="list.nextPage(list.index,limit,'engineer')" infinite-scroll-disabled='list.stopscript' >
<ul class="selectMajor relatedCareer " ng-repeat="item in myData" >
<li class="check">
<input type="checkbox" id="check5" class="css-checkbox" /><label class="css-label" for="check5"></label></li>
<li class="icon"><span class="icon30 greenSetting" ></span></li>
<li class="name">
<p>{{item.Name}}</p>
</li>
<li class="description">{{item.Description}}</li>
<li class="remaining">{{item.EarningsAnnual}}</li>
<li class="like"><span class="greyLike"></span></li>
</ul>
<div class="message" style="text-align: center;" ng-show="list.noRecordTrigger">
<span class="infoIcon"></span>
<span>No record found.</span>
</div>
</div>
<div><span ng-show="list.busy">Loading please wait...</span></div>
</div>
Im using a simple ng-repeat to generate a list of countries. Within each list is a hidden row/div that can be expanded and collapsed.
The issue that i am facing, is that before i introduced Angular into my application, i manually hard-coded the element's ID, for example:
<li data-show="#country1">
{{country.name}} has population of {{country.population}}
<div id="country1">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country2">
{{country.name}} has population of {{country.population}}
<div id="country2">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country3">
{{country.name}} has population of {{country.population}}
<div id="country3">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country4">
{{country.name}} has population of {{country.population}}
<div id="country4">
<p>Expand/collapse content
</div>
</li>
New code using ng-repeat:
<li ng-repeat="country in countries" data-show="????">
{{country.name}} has population of {{country.population}}
<div id="???">
<p>Expand/collapse content
</div>
</li>
How can i assign a dynamic/incremental id in my ng-repeat?
You can use $index https://docs.angularjs.org/api/ng/directive/ngRepeat
<li ng-repeat="country in countries" data-show="????">
{{country.name}} has population of {{country.population}}
<div id="country-{{$index}}">
<p>Expand/collapse content
</div>
</li>
You may need something like below when you got a nested ng-repeat:
<label id="country-{{$parent.$index}}-{{$index}}" ng-repeat="city in country.cites">
{{city.name}}
</label>
{{$index+1}} will show 1-5 for every page of pagination in order to change serial no as per page no of pagination, use {{$index+curPage*5+1}}, where curPage is your current page in pagination.