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>
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'm trying to figure out how I can take the following view.html below, and test for the column and row position (.col , .row) if the first element/tile.
<div class="container" gridster="gridsterOpts">
<ul>
<li>
<tile tilevalue="{{tile.tileId}}" gridster-item="tile" row="{{tile.row}}" col="{{tile.col}}" size-x="{{tile.sizeX}}" size-y="{{tile.sizeY}}" ng-repeat="tile in selectedTiles"/>
</li>
</ul>
</div>
Any ideas how this can be done? I don't know how to use the repeater call, i'd imagine that's where the solution is derived.
Since this is a Protractor-specific question - you can use the built-in by.repeater() locator and get the first() element:
var firstTile = element.all(by.repeater("tile in selectedTiles")).first();
Then, to get the row and col attribute values, use getAttribute():
firstTile.getAttribute("row").then(function (row) {
console.log(row);
});
firstTile.getAttribute("col").then(function (col) {
console.log(col);
});
Or, if you want to assert the values:
expect(firstTile.getAttribute("row")).toEqual("0");
expect(firstTile.getAttribute("col")).toEqual("0");
The ng-repeat call in Angular simply generates the appropriate html to display the relevant information. As such, your ElementFinder (or ElementFinders) simply need to select the row, col that you need using ByCss.
See the example from w3schools and inspect the result. http://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_array
You'll see that the following angular code
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
Creates this html:
<ul>
<!-- ngRepeat: x in names -->
<li class="ng-binding ng-scope" ng-repeat="x in names">Jani</li>
<!-- end ngRepeat: x in names -->
<li class="ng-binding ng-scope" ng-repeat="x in names">Hege</li>
<!-- end ngRepeat: x in names -->
<li class="ng-binding ng-scope" ng-repeat="x in names">Kai</li>
<!-- end ngRepeat: x in names -->
</ul>
So your ElementFinder will be:
element(by.Css('ul li'));
or
element(by.Css('ul li tile'));
<ul class="day">
<li ng-repeat="sessions in day">
<ul class="table-view">
<li class="table-view-cell" ng-repeat="(heading, session) in sessions">
<span class="group">{{heading}}</span>
<ul class="cell">
<li class="cell-content" ng-repeat="val in session" ng-click="session($event, val.id)">
<div class="time" style="background-color:#{{val.color}}">
<span>{{val.start | date:"h:mma"}}</span>
<span>to</span>
<span>{{val.end | date:"h:mma"}}</span>
</div>
<div class="session" ng-class-odd="'odd'" ng-class-even="'even'">
<span class="name">{{val.name}}</span>
<span class="room">Room: {{val.room}}</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I've a nested ng-repeats and within the last inner loop have a function call, the function is defined on $scope but I'm getting the following error.
TypeError: object is not a function
$scope.session = function($event, id) {
console.log(id);
};
not sure if it has to do with nesting of ng-repeats and their scopes.
It has nothing to do with nesting several ng-repeats, but I think it is mixing it up with sessionobject which returns from ng-repeat="(heading, session) in sessions" . Try to change the function name to something else and give it a try.
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
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>