Create a unique filter in an ng-repeat directive that allows users to personalize the data displayed

Is there a way to create a custom filter that hides the inventory column for Color Pencil Special on October 2nd, 2017 in the view?

The inventory for Color Pencil Special is dependent on the inventory of regular Color Pencils, which are stored somewhere else.

$scope.stationary = [{
        "name": "Pen",
        "data": [{
            "date": "1-10-2017",
            "inventory": 25
        }, {
            "date": "2-10-2017",
            "inventory": 21
        }]
    }, {
        "name": "Color Pencil",
        "data": [{
            "date": "1-10-2017",
            "inventory": 3
        }, {
            "date": "2-10-2017",
            "inventory": 0
        }]
    }, {
        "name": "Color Pencil Special",
        "data": [{
            "date": "1-10-2017",
            "inventory": 2
        }, {
            "date": "2-10-2017",
            "inventory": 1 // this should be hidden in the view since regular Color Pencil inventory is zero
        }]
    }]

http://jsfiddle.net/2krrda9k/

I've been struggling with this issue for quite some time. It's proving to be quite challenging...

javascriptangularjsalgorithm

Answer №1

Utilize this unique custom filter:

myApp.filter('match', function() {
  return function(items) {
    debugger;
    var filtered = [];
    var condition = false;
    angular.forEach(items, function(item) {
      angular.forEach(item.data, function(vals) {
        if (vals.inventory == 0 && condition == false) {
          condition = true;
        } else if (vals.inventory != 0 && condition === false) {
          if (filtered.indexOf(item) == '-1') {
            filtered.push(item);
          }

        }
      });
    });
    return filtered;
  };
});

DEMO

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

Exploring the capabilities of Vue.js, including the use of Vue.set()

Just starting out with Vuejs and I have a query regarding the correct approach to achieve what I want. My Objective I aim to have some dates stored in an array and be able to update them upon an event trigger. Initially, I attempted using Vue.set, which ...

javascriptvue.jsmomentjsvuejs2

Tips for waiting for an HTML element to load in a Selenium JavaScript testing script

I'm struggling to find a way to wait for an element to load in a javascript selenium test script. The closest thing I've come across is until.elementLocated, but it seems to throw an immediate exception. Is there a method to delay throwing the " ...

javascriptselenium-webdriver

Submitting a Form with an Array using AngularJS - HTTP POST

I have a situation where I need to make a POST request with an array of values in a form. Below is the HTML code I am using: <label>Name</label> <input type="text" name="name" ng-model="vm.model.name"> <label>Behaviours</label ...

angularjsarraysformspost

Error encountered with the Angular 2 routing system

Currently, I am facing an issue with my Angular 2 router module. Whenever I try to access the link /city, I encounter an error message saying 'ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet Error: Cannot activat ...

javascriptangulartypescriptangular-ui-router

A step-by-step guide on enhancing error message handling for Reactive forms in Angular

Here is a code snippet that I'm working on: public errorMessages; ngOnInit(): void { this.startErrorMessage(); } private startErrorMessage() { this.errorMessages = maxLength: this.translate.instant(' ...

javascriptangulartypescriptformsangular-reactive-forms

Protected node.js REST API

I want to ensure the security of a restful API and aim to keep it simple and stateless. What is the best way to store, generate, and authenticate API keys? I was considering using node-uuid to generate keys, storing them in Redis, and then authenticating ...

javascriptnode.jssecurityrestexpress

Troubleshooting npm audit error involving loadVirtual and ENOLOCK

➜ npm safety check npm ERR! code ENOLOCK npm ERR! safety check This operation requires an existing lockfile. npm ERR! safety check Please generate one using: npm i --package-lock-only npm ERR! safety check Original error: loadVirtual needs a preexistin ...

javascriptnode.jsreactjsnpm

When utilizing Expo, importing a module may result in returning null

I've been attempting to incorporate a compass module into my project using expo and react native, but I'm encountering some issues. Check out the library here The problem arises when I try to import the module. Here's the error message I r ...

javascriptreactjsreact-nativeimportexpo

Querying MongoDB findAndModify: <<< locate and modify an object within an array in a document

Question : I am attempting to locate an object within a document's array and make updates to it. The syntax below provides me with the desired object, but I am unsure of how to update it. I attempted to use this query in findAndModify, but it seems ...

javascriptarraysmongodbexpress

The Angular2 view is failing to display updated data from a shared service

I've been struggling to show data from my shared service, but it's not displaying. Can someone please help me out? I've been stuck on this for the past few days. I've tried NgZone and ChangeDetectorRef, but they haven't worked for ...

javascriptangulartypescriptrxjsangular2-template

What is the best way to incorporate a loading icon onto a webpage that exclusively runs JavaScript functions?

I frequently use Ajax load icons to indicate progress during ajax requests. Is there a way to achieve the same result using regular JavaScript? For instance: $('button').on('click', function(){ showLoadingIcon(); lengthyProces ...

javascriptjqueryajaxbrowserloading

Error: React JS is unable to access the property 'path' because it is undefined

Currently, I am encountering an issue while setting the src of my image in React to this.props.file[0].path. The problem arises because this state has not been set yet, resulting in a TypeError: Cannot read property 'path' of undefined. To provid ...

javascriptnode.jsreactjspostgresql

What is the method for retrieving the index of an array from an HTML element?

Howdy! Within my Vue application, I have the ability to create multiple individuals: <div v-for="newContent in temp" :key="newContent.id" @click="showId(newContent.id)" v-show="true"> <!-- ...

javascripthtmlvue.js

Tips for verifying the contents of a textbox with the help of a Bootstrap

I am still learning javascript and I want to make a banner appear if the textbox is empty, but it's not working. How can I use bootstrap banners to create an alert? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&g ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

JavaScript: Creating Custom IDs for Element Generation

I've been developing a jeopardy-style web application and I have a feature where users can create multiple teams with custom names. HTML <!--Score Boards--> <div id="teamBoards"> <div id="teams"> ...

javascriptjqueryhtml

Creating a Curved Border with Clip Path in CSS

Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish thi ...

javascripthtmlcss

What is the best way to update and add data with just one click using jQuery?

Trying to dynamically add text to textboxes by clicking an "add" button. The code allows for adding/removing textboxes that save values to and delete from a database. Upon page load, a function called showitem creates textboxes dynamically and populates th ...

javascriptphpjqueryajax

Is there a way I can retrieve a cookie stored in an Express middleware even if the req.cookies object is returning empty?

I am currently working on validating a cookie using the cookie-parser module to verify if the user is authenticated to access restricted routes within my application. My technology stack includes NodeJS and Express for the server, and Sveltekit for the fro ...

javascriptnode.jsexpresscookies

Navigate to a local server running on localhost:3000 and access the external URL www.google.com

When attempting to access an external URL, the website that should open in a new tab is redirecting to http://localhost:3001/www.google.com instead of www.google.com. <IconButton key={index} size="large" color="primary" href={e.url ...

javascripthtmlcssreactjslocation-href

How can we have a div stay at the top of the screen when scrolling down, but return to its original position when scrolling back up?

By utilizing this code, a div with position: absolute (top: 46px) on a page will become fixed to the top of the page (top: 0px) once the user scrolls to a certain point (the distance from the div to the top of the page). $(window).scroll(function (e) { ...

javascriptcss