I have a Filter for a Table and want to show no Results if the filter found nothing.
In short the necessary Code:
<th>Keys
<input ng-model="k" id="search" class="form-control" placeholder="Suche...">
</th>
<tr dir-paginate="v in result = ($ctrl.langV | filter:{Name:k}) | orderBy : 'Name' |itemsPerPage: 10">
<td class="td-keys">{{v.Name}}
</td>
<td ng-if="result.length === 0">Keine Ergebnisse</td>
I have found allready here a few Examples:
Show message if text filter return no result in ng-repeat
How to show a message when filter returns nothing in ng-repeat - AngularJS
AngularJS - placeholder for empty result from filter
But none of them working?
A simple
<td ng-show="result.length">Keine Ergebnisse</td>
Is showing me the extra td because results are found. But the opposite for no Results never works.
Thx for Solutions :)
Why don't you use like this... when no results, this would show.
<td ng-if="!result.length">Keine Ergebnisse</td>
In the three examples you referenced, they are displaying the no result message outside of the ng-repeat. You are display the no result message inside the ng-repeat. Try taking that statement out of the scope of the ng-repeat and see if it works then.
At first you have to give an alias to your "results", something like filteredItems, as below:
<tr dir-paginate="v in $ctrl.langV | filter: { Name: k } | orderBy : 'Name' | itemsPerPage: 10 as filteredItems">
Then, you can use it:
<td ng-if="!filteredItems.length">No results</td>
Related
I have an array that looks like the following:
I want to display that using angularJS ng-repeat, showing both count and value for each.
This is currently the HTML and angular I have but nothing displays.
I also don't need to display the 0 index in the array, I want to start from 1 if possible.
<tr ng-class="" ng-repeat="x in vm.data | filter: searchArray">
<td>{{x.value}}</td>
<td>{{x.count}}</td>
</tr>
I went back to the basics and understood that an ng-repeat is just a loop in javascript, and what do you need to do if you want to access data in JavaScript if your array is multi-dimensional? well you do a nested for loop, and thats exactly what I'm doing in this case.
This is the updated html/angularjs that displays the data I need:
<tbody>
<tr ng-repeat="x in vm.data">
<td ng-repeat="y in x">{{y.value}} {{y.count}}</td>
</tr>
</tbody>
Thank you guys again!
When I paint the following html:
<table >
...
<tr ng-repeat="item in countryItems">
<td ng-repeat="monthName in admin.monthName">
<input class="form-control text-right"
type="number"
ng-model="countryItem[item._id][monthName.text]"
style="width:75px"
value="{{item[monthName.text]}}"
>
</td>
...
</table>
displays values as expected, but dumping values like this:
<pre>{{countryItem | json}}</pre>
only shows
{}
also when posting this scope var "countryItem", the value is the same as the printed in the element.
Strangely when I do mouseover over those inputs, prints just the input I passed the mouse over, so until I didn't pass the mouse over all the inputs the object doesn't get all the values ...
What is wrong? I expect to have the same value in the object which is printed in the table.
countryItem doesn't exist, it should be countryItems
Like so:
{{countryItems | json}}
Or if inside your ng-repeat:
{{countryItems[item._id][monthName.text] | json}}
Also, you shouldn't bind a value to an input that already has an ng-model, since that's the responsibility of the ng-model directive.
I've couple of select fields on basis of which I want to filter data. Here is working plukr: http://plnkr.co/edit/VUnAoL2Sl0IqGcZqHbbi?p=preview
If I select any one value from select, it works fine, but when I select the other one it don't show any data.
These filters are going to be dynamic (depending on number of columns) So I want that in HTML I could use it with single filter declaration like: <tr ng-repeat="row in data | filter:{columns: filt}">
Not like: <tr ng-repeat="row in data | filter:{columns: filt.something} | filter: {some: thing}">
<tr ng-repeat="row in _data = (data | filter:{columns: {dealType:filt.dealType}}) | filter:{columns:{primaryUse:filt.primaryUse}}">
<td ng-repeat="column in row.columns">
{{column[column.header]}}
</td>
</tr>
I have got the same issue and it worked with a change in your code as above. Thanks
This question already has answers here:
How to display length of filtered ng-repeat data
(8 answers)
Closed 8 years ago.
I'm using angularjs in a site and there I have a search input that filters a list on a view. This list is displayed with a ng-repeat that has a filter from the search input:
The search input:
<input type="text" placeholder="Device Search" class="form-control hasclear"
ng-model="searchText"/>
And here the ng-repeat:
<tr ng-click="openModal(device['device_id'], device)"
ng-repeat="device in devices | filter:searchText | orderBy:predicate:reverse">
As you see the filter in the ng-repeat has the filter that uses the searchText variable from the ng-model. I would like to know if it's possible to know how many objects were found when the user enters a text in the search input (How many devices the ng-repeat is displaying being filtered). Like: 0 devices were found, 3 devices were found...
Is there a way to display this information by the way I built this search?
If you need it outside of your <tr> tag, I would do it like this:
<tr ng-click="openModal(device['device_id'], device)"
ng-repeat="device in filteredResults = (devices | filter:searchText | orderBy:predicate:reverse)">
{{filteredResults.length}} devices were found
EDIT:
Based on Dave's response which is correct, you must assign a variable to the filtered result as so
<tr ng-click="openModal(device['device_id'], device)"
ng-repeat="device in filtered_devices = (devices | filter:searchText | orderBy:predicate:reverse)">
Then, below your tr tag you can type:
<div>{{filtered_devices.length + ' devices were found'}}</div>
Plunkr example here
with a filter like filter:x as result it stores the resultant collection on the variable result.
So you can do:
<tr ng-click="openModal(device['device_id'], device)" ng-repeat="device in devices | filter:searchText as filteredCollection | orderBy:predicate:reverse">
<td><span>Filtered collection size: {{filteredCollection.length}}</span><td>
</tr>
I am sure there is a possibility with the properties:
$last
$index
something like:
<span ng-if="$last" > {{$index}} devices found </span>
documentation: https://docs.angularjs.org/api/ng/directive/ngRepeat
I am trying to make an entirely dynamic angularJS page in such a way that the data-model and header-column-model can be passed in as JSON format and the angular/view can decode everything no matter how many columns, etc.
I have everything (Column Headers, single-Column sorting, multi-Column textbox filtering) working except the data portion where it looks like I want to nest {{bindings}}.
The idea is something like this:
<tr ng-repeat="item in model | filter:filters | orderBy:predicate:reverse">
<td ng-repeat="header in headers">{{{{$parent.item}}.{{header.colName}}}}</td>
</tr>
So that it would resolve to item.column (which is how this is done normally/statically).
However, there doesn't seem to be any embedding/nesting allowed for the double-squiggle references; aka. the first '{{' matches with the first '}}' automatically.
Is there a [good] way to do this?
Try using $eval:
<tr ng-repeat="item in model | filter:filters | orderBy:predicate:reverse">
<td ng-repeat="header in headers">{{$eval('item.' + header.colName}}</td>
</tr>
Here is a plunker showing that concept:
http://plnkr.co/edit/msGuMCCj477jyUAqjChz?p=preview