Develop Reference

AngularJS - show div if ng-repeat is empty with filters

I am searching for a solution for showing a div when mine ng-repeat list is empty. I have created a list (with search filter) with different ice creams. I would like to show a div when the list is not showing any items, even when I did a search query. I am using ionic version 1 with angular v1.54.
I've tried different things and searched on Stackoverflow for questions like this. Unfortunately the answers doesn't help me any further. As example I've tried the following answer
https://stackoverflow.com/a/32960240/5503094
But that doesn't seem to work.
My code
ng-repeat
<ion-item ng-repeat="item in icecreams | filter: query as filteredItems" class="item-thumbnail-left item-text-wrap repeated-item" href="#" ng-if="item.beschikbaar == 'Ja'">
<img src="http://placehold.it/100x100">
<h2>{{ item.name }}</h2>
<p>{{ item.info | limitTo: 100 }}{{item.info.length > 100 ? '...' : ''}}</p>
<h4>{{ item.type }}</h4>
<h4>In de winkel tot: {{ item.end_date }}</h4>
</ion-item>
div to show when the list is empty (even with filtering/searching)
<div class="item" ng-hide="!filteredItems.length == 0">
<p>Er zijn geen ijssoorten gevonden!</p>
</div>
This only works when the list is empty from the begin. Can someone help me out?

Try checking if filteredItems exists also
<div class="item" ng-hide="filteredItems && filteredItems.length">
<p>Er zijn geen ijssoorten gevonden!</p>
</div>

How to use ng-class according to the html content - AngularJS

I am printing each element in my array as an HTML paragraph using ng-repeat.
<p ng-repeat="item in queries track by $index">{{ item }}</p>
The result is:
------------ title 1 --------------
content 1
------------ title 2 --------------
content 2
------------ title 3 --------------
content 3
------------ title 4 --------------
content 4
The problem is that I can't seem to figure out how to custom style paragraphs (e.g color:red;).

you add ng-class attribute
<p ng-repeat="item in queries track by $index"
ng-class={someCustomClass: item.title} >{{ item }}</p>
if the above doesnt work then this should
<p ng-repeat="item in queries track by $index"
ng-class={someCustomClass: Boolean(item.title) } >{{ item }}</p>
If i am wrong the idea is to supply an object literal to ng-class, where the key is the class name and the value is the condition to apply the class
so ng-class={ theClassNameToUse: TheCondition }

If you want to use ng-class, you can use this syntax:
ng-class="{'class-name': item.indexOf('title') >= 0}"
Or, you can use ng-style like this:
ng-style="setColor(item)"
With the function:
$scope.setColor = function (item) {
if (item.indexOf("title") >= 0) {
return { color: red };
}
}

Something like this will do:
<p ng-repeat="item in queries track by $index"
ng-attr-style="{{ item.indexOf('title') != -1 ? 'color: red' : '' }}">{{ item }}</p>

Angular sorting by descending

I thought that is using the orderby filter in angular, we could simply reverse by adding a "-" before that which you want to order by. So in my case in the code below, why would this not work? I have tried with the "-" in and out of the single quotes.
Code:
<tr class="alertText" ng-repeat="swipe in ppt.Swipes | orderBy:'-swipe.date' ">
<td>{{swipe.date|date : 'MM/dd/yyyy'}}</td>
<td>{{swipe.descr}}</td>
<td>{{swipe.amount | currency}}</td>
<td>{{swipe.dueDate|date : 'MM/dd/yyyy'}}</td>
<td>{{swipe.status}}</td>
<td class="clearIcon"><span ng-click="editSwipe()"><img src="ppt/assets/toolIcons/clearswipe-small.svg"></span></td>
</tr>

orderBy:'-date' is enought for ordering

You should have the property as '-date' in the ng-repeat in the filter ,
Code:
<div ng-repeat="card in myCards | orderBy:'-date'">
<businesscard>{{card.firstName}} {{card.date | date}}</businesscard>
</div>
Here is the working jsfiddle

function Main($scope) {
$scope.items = [
{"name":"ali",date: new Date('12/23/2013')}
,{"name":"Reza",date: new Date('12/23/2015')},
{"name":"Amir",date: new Date('12/23/2011')}
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="Main">
<div ng-repeat="item in items | orderBy:'-date'">{{item.name}}: {{item.date | date}}</div>
</div>
</div>

And don't forget than you can use second parameter of orderBy filter to set sort order:
<tr class="alertText" ng-repeat="swipe in ppt.Swipes | orderBy:'date':1">

Manipulating data in angularjs/javascript

I have a an array of objects like this in angular:
$scope.data = [
{name:"John", group:"a"},
{name:"David", group:"a"},
{name:"Tom", group:"b"},
];
I want to present this data as something like this (in a template):
<h2>group a</h2>
John<br/>
David<br/>
<h2>groub b</h2>
Tom<br>
How would you suggest to do this? How can I go from the structure at the beginning to the structure at the end?

You could use grouby filter that would do group for you on basis of group property
Markup
<div ng-repeat="(key, value) in data | groupBy: 'group'">
<h1>group {{ key }}</h1>
<div ng-repeat="person in value">
{{ person.name }}
</div>
</div>

Only show "No result" once when using nested ng-repeat in AngularJS

My scope has an array of objects named "ideas" in this format:
{
"id":1,
"own":true,
"ideas":[
"one",
"two",
"three",
"four",
"five",
"six",
"seven",
"eight",
"nine",
"ready"
]
}
I first need to filter based on the "own" attribute (custom filter includeReceived). Then I want the final result to return only matching items from the nested "ideas" array.
<div ng-repeat="idea in ideas | includeReceived:checked">
<div ng-repeat="ideaText in filteredIdeas = (idea['ideas'] | filter:search)">
{{ideaText}}
</div>
<div ng-hide="filteredIdeas.length">There is no result</div>
</div>
This works nicely, but I want to display the message "There is no result" when nothing is found. The above code displays this message for each iteration of the outer ng-repeat. Thank you very much for any ideas.

You can append the "search" filter to the first set of results to weed-out those results that don't have the searched-for text. Then, Angular 1.3.0 provides an ability to alias the filtered results, so you could do something like:
<div ng-repeat="idea in ideas | includeReceived:checked | filter: {ideas: search} as filteredIdeas">
<div ng-repeat="ideaText in idea['ideas'] | filter:search">
{{ideaText}}
</div>
</div>
<div ng-if="filteredIdeas.length === 0">There is no result</div>

Thanks for the inputs, guys. Using New Dev's approach in Angular 1.2.26, this code does the trick:
<input type="checkbox" ng-model="checked" ng-init="checked=true">Include ideas you received<br/>
<div ng-controller="IdeaCtrl">
<div ng-repeat="idea in filteredIdeas = (ideas | includeReceived:checked | filter:search)">
<div ng-repeat="ideaText in idea['ideas'] | filter:search">
{{ideaText}}
</div>
</div>
<div ng-hide="filteredIdeas.length">There is no result</div>

You can put the message outside the ng-repeat
<div ng-hide="filteredIdeas.length">There is no result</div>