Troubles arise with ng-repeat filters when used within another ng-repeat

I have successfully displayed the ng-repeat content in two columns using this code:

        <div class=storerow ng-repeat="store in stores track by $index" ng-if="$index%2==0">
            <div ng-repeat="i in [$index,$index+1]" ng-if="stores[i]!=null" class="ngrepeatstore">
                    <div class="image-container" style="background-image: url({{stores[i].image}})" ng-click="tileClicked({{stores[i].id}})">
                    </div>
        </div>

However, when I introduce a filter, it causes the NG repeat to break and no content appears:

        <div class=storerow ng-repeat="store in stores track by $index" ng-if="$index%2==0">
            <div ng-repeat="i in [$index,$index+1] | filter: greaterThan('order', 0) | orderBy:'order'" ng-if="stores[i]!=null" class="ngrepeatstore">
                    <div class="image-container" style="background-image: url({{stores[i].image}})" ng-click="tileClicked({{stores[i].id}})">
                    </div>
        </div>

The JavaScript function for 'greaterThan':

    $scope.greaterThan = function(prop, val){
    return function(item){
      return item[prop] > val;
    }}

I attempted adding the filter to the first ng-repeat, but it did not work as expected and applied the filter to all items. This resulted in showing all items if just one is greatThan 0, instead of filtering only the ones greater than 0.

Answer №1

The reason for this confusion is that in Angular, when you use the order property to filter on [$index, $index + 1], which is an array of two integers, it doesn't make logical sense.

In simpler terms, when you compare index.prop > val in your delegate, you are essentially comparing index['order'] > someValue.

This concept can be better understood through this Plunker example: http://plnkr.co/edit/FkSrmZuuK4B1ToGNgAnq?p=preview. The solution lies in moving filter:greaterThan(prop, val) up to the parent ng-repeat where the filter will function correctly.

<div ng-repeat="store in stores | filter:greaterThan2('id', 0) | orderBy:'name'" ng-if="$even">
  {{store.name}}
  <div ng-repeat="i in [$index, $index+1] | orderBy:angular.identity:true" ng-if="stores[i] !== null">
    <strong>store.id</strong> {{i}}
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

creating a JSON array within a function

I am currently developing an Angular application and working on a component with the following method: createPath(node, currentPath = []){ if(node.parent !==null) { return createPath(node.parent, [node.data.name, ...currentPath]) } else { retu ...

Is there a way to prevent a 'keyup' event from being triggered by a 'keydown' event?

I have a tool that resolves zip codes and I am currently utilizing a keyup event handler to trigger a server query once the input length reaches 5 characters. However, I want to prevent unnecessary calls to the script, so I am exploring the possibility o ...

Tips for including absent items in an array

Looking to fill in missing weeks and years in an array of objects that have a reportYear and reportWeek property. How can I insert additional objects to cover all weeks from the beginning date to the end date? For example: Input: [ {"reportYear":2017, ...

What is the best way to set a button as the default option when it is pressed down?

<div class="input-group"> <input type="text" id="srcSchtext" class="form-control" runat="server" placeholder="Search here..." /> <span class="input-group-btn"> <asp:Button runat="server" ID="btnSearchEmployee" ...

The functionality for initiating a download is currently not functioning as expected

Is there a way to prompt a download for a user when they click a link instead of opening it in the browser? When using expressJS, achieving this is as simple as: app.get('/download', function (req, res) { res.download('public/uploads/sam ...

Tips for changing a fullscreen HTML5 video appearance

I discovered a way to change the appearance of a regular video element using this CSS code: transform: rotate(9deg) !important; But, when I try to make the video fullscreen, the user-agent CSS rules seem to automatically take control: https://i.sstatic. ...

Can you please provide guidance on implementing automatic horizontal scrolling with pauses between each div?

setInterval(function scroll() { $(".box_auto").each(function(i, e) { $("html, body").animate({ scrollTop: $(e).offset().top }, 500).delay(500); }); setTimeout(function() { $('html, body').animate({ scrollTop: 0 } ...

A guide on sharing an express.js response object with a different module

In my server.js file, I am attempting to pass an Express response object to a different module. Here is how I have implemented it: const room = require('../controller/rooms_controller') app.post('/rooms', function(req, res){ var na ...

The browser failed to display the SVG image, and the console log indicated that the promise was rejected, with the message "false."

I'm struggling to understand why my SVG isn't showing up on the screen. The console log is displaying "false," which I believe indicates that a promise was rejected Here is the TypeScript file I am working with: export class PieChartComponent im ...

Registration and Mapping Interface API

Recently, I have been researching information for an application that we are planning to develop for our chain of stores (approximately 20). Our goal is to reward customers with points when they check-in at our store locations. Additionally, we aim to show ...

Insert HTML elements using javascript

Is it possible to change this JavaScript code in the following way: divElement.appendChild(document.createTextNode("<h7>Optie " + inputNumber + ": </h7>")); What would be the best approach to achieve this? ...

Tips for clearing a text box on an AngularJS page when clicking a link within the page

On my HTML page, I have a search box and various category links. When a user enters text in the search box, I want to display: p in Products | filter {searchedText} If a user clicks on a category link, I want to display: p in Products | filter {categor ...

Can someone help me troubleshoot this issue with my code so that my website can open in a blank page using about:blank?

I'm currently facing an issue while trying to make one of the pages on my website open with an about:blank URL upon loading. Despite embedding the code in my index.html file, it doesn't seem to be functioning properly. Here's the code I&apos ...

Deactivate the button once the form has been submitted

Seems like a simple and common question, right? I also thought so. How can I achieve this in angularJS? CSHTML @using (Html.BeginForm("Order", "Shop", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { <div class="container" ng-ap ...

The current error message states that the function is undefined, indicating that the Bookshelf.js model function is not being acknowledged

I have implemented a user registration API endpoint using NodeJS, ExpressJS, and Bookshelf.js. However, I encountered an error while POSTing to the register URL related to one of the functions in the User model. Here is the code snippet from routes/index. ...

JavaScript can be used to call a web service directly from a content page

Is there a way to call an autocomplete webservice from JavaScript in a content page that is part of the same web app? I have found that when I include a master page, the autocomplete feature stops working. I haven't added a script manager to the maste ...

What is the best way to access data stored in the state of the store.js within a Vue application?

Currently, I am working on my initial project using Vue.js. The application involves a multi-step form that shares a common header and footer. As the user progresses through each step, the data entered is sent to store.js for storage. However, I have encou ...

Incorporating the parent object into a nested JavaScript function

I have come across similar questions, but my situation seems unique to me. I have simplified my code and turned one line into a comment, but the core concept remains unchanged... function myFunction(options) { var button; options.widgets.forEach(f ...

How can I implement checkboxes for each row in tables using AngularJS?

Looking to include a checkbox for each table row in AngularJS that, when checked, will send the value to the controller. Can someone assist me with accomplishing this? Below is my index1.html <html ng-app> <title>Angular Table</title> & ...

Determining the name of an angular module using JavaScript

How can I extract the name of the Angular Module using JavaScript? I need to fetch the module name of an Angular JS application in my JavaScript file to be able to implement additional functionality on that particular module. I am looking for a way to ac ...