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

Question

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...

javascript angularjs algorithm

Answer 1

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

Answer 2

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

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

Answer №1

Similar questions

Removing repetitive strings from an array in the most efficient manner

Adjusting solely the depicted data sets in the Highcharts.js library

Utilize JavaScript to load images at random within a Qualtrics loop and merge block

Is jQuery validation compatible with mobile phone numbers?

Displaying time text in input element due to browser bug

Bypass Security Check in Firefox

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

Craft a hierarchical JSON structure out of a different nested JSON object [PAUSE]

Is there a way to troubleshoot why new data is not appending to existing data in React's infinite scroll feature?

Switch between two functions by clicking a button

Determine the success of an SQL query in Node.js

Updating a JSON array by including a new key-value pair using Javascript

Accessing dynamic elements in Internet Explorer 7 and 8 using jQuery

Error: When attempting to send a message in a different channel, an undefined property 'send' is encountered causing a TypeError

Validating email addresses using jQuery regular expressions

An error occurred due to a class being instantiated within a module, resulting in an overflow of the

Exploring Techniques for Adjusting Website to User's Screen Resolution

Leveraging D3.js in combination with Total.js and node.js

Error: The object does not contain the specified method

Leveraging ASP.NET MVC 5 to integrate an online document viewer from Office 365, seamlessly displaying Word documents within a sleek, compact window