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.
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
I have the following ng-repeat list. I want to convert it to checkboxes.
Currently, it is repeating the category headings in myJSON.mylist and then repeating each subitem in each category in list mode.
How can I convert the list type into checkbox type, so that ONLY subitems can be chosen?
<ul ng-repeat="s in myJSON.mylist">
<li type="checkbox"> {{s.item}}</li>
<ul >
<li type="checkbox" ng-repeat="subitem in s.subitems">
{{subitem.values}}</li>
</ul>
</ul>
here is a similar example.
you can go like this:
<div ng-repeat="sin myJSON.mylist">
<div > {{s.item}}</div>
<ul >
<li ng-repeat="subitem in s.subitems">
<input type="checkbox" name="myname"
ng-model="myModel.myname[subitem.values]">
{{subitem.values}}
</li>
</ul>
</div>
The difference is this:
You are using
<li type="checkbox"...
The example uses
<input type="checkbox" ...
Probably what you want is
<li><input type="checkbox" ...
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
I am new to angular and I wanted to to know how to apply and remove a filter in ng-repeat directive but I want to remove or add the filter on some condition such as on URL change using $stateParams
if($stateParams.x){
//remove unique filter
}
else{
//add unique filter
}
below is the code that I am working on
<div ng-app="app" ng-controller="MyCtrl as item">
<div >
<ul>
<li ng-repeat="item in items | unique: 'column'" myfilter>
{{ item.column }}
</li>
</ul>
</div>
</div>
here is a plunker link that I am trying to do this but it is not working.
http://plnkr.co/edit/zwy7slwOPfvLqJPVV1sk?p=preview
It can be done if you pass in additional param in unique filter with some flag to enable and disable unique filter. In other words if flag is true then you will go with the unique logic other wise you will just return all items. It has been answered here along with a plunker sample
If you don't want to write your own filter you can have an outer ng-if like this:
<div ng-app="app" ng-controller="MyCtrl as item">
<div>
<ul ng-if="$stateParams.x">
<li ng-repeat="item in items | unique: 'column'" myfilter>
{{ item.column }}
</li>
</ul>
<ul ng-if="!$stateParams.x>
<li ng-repeat="item in items">
{{ item.column }}
</li>
</ul>
</div>
</div>
I need the following:
<ul>
<li data-ng-repeat="person in row1">
<img data-ng-src="img/{{person.code}}.jpg">
<h3>{{person.name}}</h3>
<p>{{person.description}}</p>
</li>
</ul>
<ul>
<li data-ng-repeat="person in row2">
<img data-ng-src="img/{{person.code}}.jpg">
<h3>{{person.name}}</h3>
<p>{{person.description}}</p>
</li>
</ul>
but I don't want to duplicate the html - I want to be able to pass in the two different arrays (row1 and row2) to ng-include or something similar. How can I do this in AngularJS?
You can give the array of rows to another model and use ng-repeat in ul tag
In your controller:
$scope.rows = [row1, row2];
In your template:
<ul ng-repeat="row in rows">
<li ng-repeat="person in row">
<img data-ng-src="img/{{person.code}}.jpg">
<h3>{{person.name}}</h3>
<p>{{person.description}}</p>
</li>
</ul>