"An ng-repeat directive with a filter applied results in an empty

Question

"An ng-repeat directive with a filter applied results in an empty

After successfully implementing the ng-repeat loop below:

<div ng-repeat="einschItem in einschaetzungen.alldata | filter: { savedatum: lolatage[tagarrayindex].tagestring } | orderBy : '-savetimestamp'">

I wanted to check if the filtered result is empty. Upon researching, I came across a solution that seemed promising:

<div ng-repeat="einschItem in einschaetzungen.alldata = (values | filter: { savedatum: lolatage[tagarrayindex].tagestring } | orderBy : '-savetimestamp')">

{{values.length}}

However, when I implemented this code, the "einschItem" variable turned out to be empty and no results were displayed in the loop.

Your assistance would be greatly appreciated!

Just for reference, my angular version is v1.4.6.

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

If you want to alias the results of the repeat, you can do so by using the following syntax as specified in the Angular Documentation:

variable in expression as alias_expression
– This allows you to store the intermediate results of the repeater after applying filters.

For example:
item in items | filter:x as results
will save the filtered result set as 'results'.

It's important to note that as [variable name] is not an operator but part of ngRepeat micro-syntax and should only be used at the end of an expression.

For instance:
item in items | filter : x | orderBy : order | limitTo : limit as results
.

To implement this in your case:

<div ng-repeat="einschItem in einschaetzungen.alldata | 
               filter: { savedatum: lolatage[tagarrayindex].tagestring } |
               orderBy : '-savetimestamp' 
               as filteredItems">

{{filteredItems.length}}

Keep in mind that this approach achieves the same functionality as mentioned in another solution provided earlier; it simply offers an alternative using ngRepeat micro-syntax.

Answer 2

If you want to alias the results of the repeat, you can do so by using the following syntax as specified in the Angular Documentation:

variable in expression as alias_expression
– This allows you to store the intermediate results of the repeater after applying filters.

For example:
item in items | filter:x as results
will save the filtered result set as 'results'.

It's important to note that as [variable name] is not an operator but part of ngRepeat micro-syntax and should only be used at the end of an expression.

For instance:
item in items | filter : x | orderBy : order | limitTo : limit as results
.

To implement this in your case:

<div ng-repeat="einschItem in einschaetzungen.alldata | 
               filter: { savedatum: lolatage[tagarrayindex].tagestring } |
               orderBy : '-savetimestamp' 
               as filteredItems">

{{filteredItems.length}}

Keep in mind that this approach achieves the same functionality as mentioned in another solution provided earlier; it simply offers an alternative using ngRepeat micro-syntax.

Answer 3

Answer №2

It seems that the order of values and einshaetzungen.alldata has been mixed up.

The correct approach is to assign the filtered list to a variable and then iterate through it.

<div ng-repeat="einschItem in values = (einschaetzungen.alldata | filter: { savedatum: lolatage[tagarrayindex].tagestring } | orderBy: '-savetimestamp')">

{{values.length}}

Check out this example for reference.

If you are using Angular version 1.3.17-beta or newer, you can also use the alias formatting as shown in Claies' answer.

<div ng-repeat="einschItem in einschaetzungen.alldata | 
               filter: { savedatum: lolatage[tagarrayindex].tagestring } |
               orderBy : '-savetimestamp' 
               as filteredItems">

{{filteredItems.length}}

Answer 4

It seems that the order of values and einshaetzungen.alldata has been mixed up.

The correct approach is to assign the filtered list to a variable and then iterate through it.

<div ng-repeat="einschItem in values = (einschaetzungen.alldata | filter: { savedatum: lolatage[tagarrayindex].tagestring } | orderBy: '-savetimestamp')">

{{values.length}}

Check out this example for reference.

If you are using Angular version 1.3.17-beta or newer, you can also use the alias formatting as shown in Claies' answer.

<div ng-repeat="einschItem in einschaetzungen.alldata | 
               filter: { savedatum: lolatage[tagarrayindex].tagestring } |
               orderBy : '-savetimestamp' 
               as filteredItems">

{{filteredItems.length}}

"An ng-repeat directive with a filter applied results in an empty

Answer №1

Answer №2

Similar questions

What is the best way to organize a flatlist for rendering?

Solving filtering issues within React using a combination of conditions

I want to initiate a Python script by clicking a button on my HTML page with the help of Ajax

The binding in webstorm for AngularJS is not displaying correctly

Creating React elements dynamically with material-ui can be done by utilizing state expressions in properties. This allows for the generation

Choosing several checkboxes and populating an array with values - HTML and JavaScript

Traversing through nested states in ui-router without refreshing the parent state

AngularJS: Optimizing Image Loading for the Initial Page Load in AngularJS

I am looking to narrow down the Google Places autocomplete suggestions specifically for India within Next Js

Peeling back the layers of a particular element

When pasting Arabic text into an input box, the words in HTML appear to be jumbled and shuffled around

The compatibility of Datatables responsive feature with ajax calls appears to be limited

Extract the list of selected item Id's from the HTML table and transfer them to the Controller

What sets apart the process of installing AngularJS and AngularJS Core using NuGet?

Vue js is throwing an error message that says "Reading 'push' property of undefined is not possible"

Developing an npm module that is compatible with both web browsers and Node.js

Remove hidden data upon moving cursor over table rows after a delay

Display information from a specific identifier in a modal popup window after clicking a button using PHP and MySQL

Adding query parameters to the end of every link on a webpage

Is it viable to create an onClick event for the text content within a text area?