I am using AngularJS and its ng-repeat directive to display a sequence of questions. I need to number each question starting with 1. How do I display and increment such a counter with ng-repeat? Here is what I have so far:
<ul>
<li ng-repeat="question in questions | filter: {questionTypesId: questionType, selected: true}">
<div>
<span class="name">
{{ question.questionText }}
</span>
</div>
<ul>
<li ng-repeat="answer in question.answers">
<span class="name">
{{answer.selector}}. {{ answer.answerText }}
</span>
</li>
</ul>
</li>
</ul>
Angularjs documentation is full of examples, you just need to take some time and explore it.
See this example here : ngRepeat example , it's the same case.
<ul>
<li ng-repeat="question in questions | filter: {questionTypesId: questionType, selected: true}">
<div>
<span class="name">
{{$index + 1}} {{ question.questionText }}
</span>
</div>
<ul>
<li ng-repeat="answer in question.answers">
<span class="name">
{{answer.selector}}. {{ answer.answerText }}
</span>
</li>
</ul>
</li>
</ul>
Reached here by searching for something similar.
Here is what worked for me.
{{$index + 1}}
+1 is added because the index starts from 0.
There are two ways to get an index for the given array in ng-repeat
Using $index
<th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th>
Using a counter
This method is useful when you have nested ng-repeat and you need counters for both loops...the following example uses counter row. Although track by $index is required, it is not used for the logic.
<tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
<td>{{row+1}}</td>
In both cases counter starts with 0 and you can offset using +1 if you like
Related
I want to list an item inside a specific key using a filter. Now listing like this.
Sanal
Jin
John
Tim
Jeff
Sam
John
Tim
I want like this using a filterJeffSam
Here is the Fiddle
function testCtrl($scope) {
$scope.items = {"id":"B716","day":8,"di":{"type":"normal","one":[{"name":"Sanal","age":"18"},{"name":"Jin","age":"25"}],"two":[{"name":"Jeff","age":"55"},{"name":"Sam","age":"32"}],"three":[{"name":"John","age":"34"},{"name":"Tim","age":"39"}]}};
}
<div ng-app="" ng-controller="testCtrl">
<ul>
<li ng-repeat="val in items.di">
<ul>
<li ng-repeat="value in val">{{value.name}}</li>
</ul>
</li>
</ul>
</div>
in your ng repeat change it as
<li ng-repeat="value in val | filter: val.name='jeff'">{{value.name}}</li>
I have used name you can use the value that you want ot test
I am trying to select one item on one time in angularJS.
Here is my code
<div ng-repeat="list in listgroups" >
<ul ng-init="selected = -1">
<li ng-repeat="item in list" ng-class="{active:(selected == $index)}" ng-click="selected = $index;">{{item}} </li>
</ul>
</div>
Regards
Nauman
ng-repeat creates new scope from current scope, so If you are using selected inside a inner ng-repeat will cause to create new scope variable for inner ng-repeat.
If you want to refer the parent scope from ng-repeat then use $parent.selected that will refer the outer scope variable of ng-repeat.
HTML
<div ng-repeat="list in listgroups" ng-init="selected = -1">
<b>List {{$index + 1}}</b>
<ul>
<li ng-repeat="item in list" ng-class="{active:($parent.selected == $index)}"
ng-click="$parent.selected = $index;">
{{item}}
</li>
</ul>
</div>
Working Fiddle
For more information here is link
I have something like this:
<div ng-repeat="atma in abc">
<li ng-repeat="atma in abc.slice(0,3)"><span>{{$index+1}} - {{atma.weapon}} </span></li>
</div>
I wanted to slice these results at, each div repeat, each time being used the 3 items from index.
So I would start with the first div showing the weapons ranging from 1 to 3.
The second one would have elements from 4 to 6.
And so on.
Can I use $index or something like that on my slice?
Ps.: This question came from trying my best on this question here.
I'm still having some trouble, but I made another question based on what I could do with slice.
1st:
<div ng-repeat="atma in data">
<ul ng-if="$index % 3 == 0">
<li><span>{{data[$index]}} </span>
</li>
<li ng-if="$index+ 1 < data.length"><span>{{data[$index+1]}} </span>
</li>
<li ng-if="$index+ 2 < data.length"><span>{{data[$index+2]}} </span>
</li>
</ul>
</div>
2nd:
<div ng-repeat="atma in data">
<ul ng-if="$index % 3 == 0" ng-init="tmp = data.slice($index, $index + 3)">
<li ng-repeat="atma1 in tmp"><span>{{atma1}}</span>
</li>
</ul>
</div>
http://plnkr.co/edit/Uo1ROo549swNorzixTi3?p=preview
I have a list of items. An item can be a number of things, let's say the list is something like so :
[userObject , vehicleObject , userObject , animalObject , animalObject]
Now I want to render the list with ngRepeat directive that will use a template according to the type of the object (Polymorphic rendering). can this be done?
maybe something like (ng-use is an hypothetically directive):
<ul>
<li ng-repeat="item in items">
<img ng-use="item.type == 'user'" ng-src="item.src">
<a ng-use="item.type == 'vehicle'">{{item.link}}</a>
<span ng-use="item.type == 'animal'">{{item.name}}</span>
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-switch="item.type">
<img ng-switch-when="user" ng-src="item.src">
<a ng-switch-when="vehicle">{{item.link}}</a>
<span ng-switch-when="animal">{{item.name}}</span>
</li>
</ul>
API reference:
http://docs.angularjs.org/api/ng.directive:ngSwitch
Although this doesn't use ng-switch, it does get round the problem of not having a type field, which #DotNetHaggis pointed out.
<div ng-repeat="field in fields">
<div ng-if="field.user !== undefined">user info</div>
<div ng-if="field.vehicle !== undefined">vehicle info</div>
<div ng-if="field.animal !== undefined">animal info</div>
</div>
I thought this would be a very common thing, but I couldn't find how to handle it in AngularJS. Let's say I have a list of events and want to output them with AngularJS, then that's pretty easy:
<ul>
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
But how do I handle the case when the list is empty? I want to have a message box in place where the list is with something like "No events" or similar. The only thing that would come close is the ng-switch with events.length (how do I check if empty when an object and not an array?), but is that really the only option I have?
You can use ngShow.
<li ng-show="!events.length">No events</li>
See example.
Or you can use ngHide
<li ng-hide="events.length">No events</li>
See example.
For object you can test Object.keys.
And if you want to use this with a filtered list here's a neat trick:
<ul>
<li ng-repeat="item in filteredItems = (items | filter:keyword)">
...
</li>
</ul>
<div ng-hide="filteredItems.length">No items found</div>
You might want to check out the angular-ui directive ui-if if you just want to remove the ul from the DOM when the list is empty:
<ul ui-if="!!events.length">
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
With the newer versions of angularjs the correct answer to this question is to use ng-if:
<ul>
<li ng-if="list.length === 0">( No items in this list yet! )</li>
<li ng-repeat="item in list">{{ item }}</li>
</ul>
This solution will not flicker when the list is about to download either because the list has to be defined and with a length of 0 for the message to display.
Here is a plunker to show it in use: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview
Tip: You can also show a loading text or spinner:
<li ng-if="!list">( Loading... )</li>
<ul>
<li ng-repeat="item in items | filter:keyword as filteredItems">
...
</li>
<li ng-if="filteredItems.length===0">
No items found
</li>
</ul>
This is similar to #Konrad 'ktoso' Malawski but slightly easier to remember.
Tested with Angular 1.4
Here's a different approach using CSS instead of JavaScript/AngularJS.
CSS:
.emptymsg {
display: list-item;
}
li + .emptymsg {
display: none;
}
Markup:
<ul>
<li ng-repeat="item in filteredItems"> ... </li>
<li class="emptymsg">No items found</li>
</ul>
If the list is empty, <li ng-repeat="item in filteredItems">, etc. will get commented out and will become a comment instead of a li element.
You can use this ng-switch:
<div ng-app ng-controller="friendsCtrl">
<label>Search: </label><input ng-model="searchText" type="text">
<div ng-init="filtered = (friends | filter:searchText)">
<h3>'Found '{{(friends | filter:searchText).length}} friends</h3>
<div ng-switch="(friends | filter:searchText).length">
<span class="ng-empty" ng-switch-when="0">No friends</span>
<table ng-switch-default>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</tbody>
</table>
</div>
You can use as keyword to refer a collection under a ng-repeat element:
<table>
<tr ng-repeat="task in tasks | filter:category | filter:query as res">
<td>{{task.id}}</td>
<td>{{task.description}}</td>
</tr>
<tr ng-if="res.length === 0">
<td colspan="2">no results</td>
</tr>
</table>
i usually use ng-show
<li ng-show="variable.length"></li>
where variable you define for example
<div class="list-group-item" ng-repeat="product in store.products">
<li ng-show="product.length">show something</li>
</div>
you can use ng-if because this is not render in html page and you dont see your html tag in inspect...
<ul ng-repeat="item in items" ng-if="items.length > 0">
<li>{{item}}<li>
</ul>
<div class="alert alert-info">there is no items!</div>