Removing filters dynamically from ng-repeat in Angular

Question

Removing filters dynamically from ng-repeat in Angular

I am currently using ng-repeat to display a list of staff members:

<div ng-repeat="user in staff | profAndDr">

There is also a custom filter called 'profAndDr' that only shows people with the titles "Dr." and "Prof.":

app.filter('profAndDr', function() {
return function(input) {
    var out = [];
    angular.forEach(input, function(title) {
        if (title.title === 'PROF.'||title.title==='DR.') {
            out.push(title)
        }
    })
return out;
}

However, I now need to add a checkbox that will allow me to show people with the title "Prof. Amaritos" when checked. This means that I will need to remove the filter from ng-repeat if the checkbox is checked.

You can find the code for this on Codepen.

Thank you!

javascript angularjs

Answer 1

Answer №1

If you want to conditionally determine if your checkbox is checked, you can pass variables into the filter and use them in your AngularJS code.

For example:

<div ng-repeat="user in staff | profAndDr: isChecked">

Then, create a custom filter like this:

app.filter('profAndDr', function() {
    return function(input, isChecked) {
        var out = [];
        angular.forEach(input, function(title) {
            if (title.title === 'PROF.' || title.title==='DR.' || (isChecked && [othercondition])) {
                out.push(title)
            }
        })
    return out;
}

Answer 2

If you want to conditionally determine if your checkbox is checked, you can pass variables into the filter and use them in your AngularJS code.

For example:

<div ng-repeat="user in staff | profAndDr: isChecked">

Then, create a custom filter like this:

app.filter('profAndDr', function() {
    return function(input, isChecked) {
        var out = [];
        angular.forEach(input, function(title) {
            if (title.title === 'PROF.' || title.title==='DR.' || (isChecked && [othercondition])) {
                out.push(title)
            }
        })
    return out;
}

Answer 3

Answer №2

To avoid implementing multiple ng-repeat without a filter, it is advisable to pass a true/false flag to the filter function in order to return the input as is.

Code Snippet:

<div ng-app="staffApp">
    <div ng-controller="StaffListCtrl">
    <label for="amaritos">Show Amaritos</label>
    <input id="amaritos" type="checkbox" ng-model="showFlag">
    <hr />
    <div 
            ng-cloak 
            ng-repeat="user in staff | profAndDr:showFlag">
      {{user.title}} {{user.first}}
    </div>
  </div>
</div>

Filter Function:

phonecatApp.filter('profAndDr', function() {
    return function(input) {
        var out = [];
        angular.forEach(input, function(title) {
            if (title.title === 'PROF.'||title.title==='DR.') {
                out.push(title)
            }
        })
    return out;
    }
});

Answer 4

To avoid implementing multiple ng-repeat without a filter, it is advisable to pass a true/false flag to the filter function in order to return the input as is.

Code Snippet:

<div ng-app="staffApp">
    <div ng-controller="StaffListCtrl">
    <label for="amaritos">Show Amaritos</label>
    <input id="amaritos" type="checkbox" ng-model="showFlag">
    <hr />
    <div 
            ng-cloak 
            ng-repeat="user in staff | profAndDr:showFlag">
      {{user.title}} {{user.first}}
    </div>
  </div>
</div>

Filter Function:

phonecatApp.filter('profAndDr', function() {
    return function(input) {
        var out = [];
        angular.forEach(input, function(title) {
            if (title.title === 'PROF.'||title.title==='DR.') {
                out.push(title)
            }
        })
    return out;
    }
});

Answer 5

Answer №3

To implement a filter based on checkbox value, you can pass the checkbox value as a parameter to your filter function. If the checkbox is checked, return the original input. Otherwise, filter out items that do not match certain criteria.

app.filter('profAndDr', function() {
  return function(input, showAmaritos) {
    if (showAmaritos) {
      return input;
    }
    var out = [];
    angular.forEach(input, function(title) {
        if (title.title === 'PROF.'||title.title==='DR.') {
            out.push(title)
        }
    });
    return out;
  }
}

Below is an example of how to use this filter in HTML:

<input id="amaritos" ng-model="showAmaritos" type="checkbox">

<div ng-repeat="user in staff | profAndDr:showAmaritos">

For a working demonstration, check out the improved codepen.

Answer 6

To implement a filter based on checkbox value, you can pass the checkbox value as a parameter to your filter function. If the checkbox is checked, return the original input. Otherwise, filter out items that do not match certain criteria.

app.filter('profAndDr', function() {
  return function(input, showAmaritos) {
    if (showAmaritos) {
      return input;
    }
    var out = [];
    angular.forEach(input, function(title) {
        if (title.title === 'PROF.'||title.title==='DR.') {
            out.push(title)
        }
    });
    return out;
  }
}

Below is an example of how to use this filter in HTML:

<input id="amaritos" ng-model="showAmaritos" type="checkbox">

<div ng-repeat="user in staff | profAndDr:showAmaritos">

For a working demonstration, check out the improved codepen.

Answer 7

Answer №4

update javascript code

var app = angular.module('teamApp', []);

"use strict";

app.controller('TeamListCtrl', ['$scope', '$filter', function ($scope) {
$scope.showTitle=false;
$scope.team = [
{
"first": "POZIK",
"last": "GOLDSMITH",
"title": "PROF."
},
{
"first": "LOSHOK",
"last": "GALIMIY",
"title": "DR."
},
{
"first": "SHMOK",
"last": "GOLDSMITH",
"title": "PROF. AMARITOS"
},

] }])

app.filter('profAndDr', function() {
return function(input, toggle) {
var output = [];
angular.forEach(input, function(title) {
if (toggle == false) {
if (title.title === 'PROF.' || title.title === 'DR.') {
output.push(title)
}

}
else if (toggle == true) {
if (title.title === 'PROF. AMARITOS') {
output.push(title)
}
}
})
return output;
}

});

and in your HTML

<input id="amaritos" type="checkbox" ng-model='showTitle'>

Answer 8

update javascript code

var app = angular.module('teamApp', []);

"use strict";

app.controller('TeamListCtrl', ['$scope', '$filter', function ($scope) {
$scope.showTitle=false;
$scope.team = [
{
"first": "POZIK",
"last": "GOLDSMITH",
"title": "PROF."
},
{
"first": "LOSHOK",
"last": "GALIMIY",
"title": "DR."
},
{
"first": "SHMOK",
"last": "GOLDSMITH",
"title": "PROF. AMARITOS"
},

] }])

app.filter('profAndDr', function() {
return function(input, toggle) {
var output = [];
angular.forEach(input, function(title) {
if (toggle == false) {
if (title.title === 'PROF.' || title.title === 'DR.') {
output.push(title)
}

}
else if (toggle == true) {
if (title.title === 'PROF. AMARITOS') {
output.push(title)
}
}
})
return output;
}

});

and in your HTML

<input id="amaritos" type="checkbox" ng-model='showTitle'>

Answer 9

Answer №5

To capture the data entered in your form fields, you simply need to create a variable using the ng-model attribute. Once you have stored this value, you can then apply different filters or conditions based on its contents.

http://codepen.io/anon/pen/rNzQxo

I trust this information proves valuable to you.

Answer 10

To capture the data entered in your form fields, you simply need to create a variable using the ng-model attribute. Once you have stored this value, you can then apply different filters or conditions based on its contents.

http://codepen.io/anon/pen/rNzQxo

I trust this information proves valuable to you.

Removing filters dynamically from ng-repeat in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The routing functionality in Angular4 encounters issues when the `router.navigate()` method is used within the callback of a

It seems like I'm having trouble sharing a collection of objects

What is the correct way to implement the chain populate method in a Node.js application?

How to showcase base64 encoded images in pug (jade) with node.js

"Converting jQuery Form into a Wizard feature with the ability to hide specific steps

Craft fresh items within HTTP request mapping

AngularJS's ng-click attribute is used to call a function within a controller

Utilize a jQuery selector to target the initial element of every alphabet character

Creating a group object based on ID using react-native and JavaScript - a step-by-step guide

How to update the <DIV> in Angular JS after submitting data?

JS/JQuery: Retrieve value from dropdown list or input field

Toggle the visibility of items based on the user's login status

Executing functionality based on changes in Angular bindings

Multiple instances of Ajax drop-down effects are now available

The Vue JS task manager is unable to remove completed tasks from the list

The condition in a Typescript function that checks for strings will never evaluate to true

Is there a way in Angular Material to consistently display both the step values and a personalized description for each step?

Access account without providing all necessary identification documents

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

Cannot get the before-leave transition JavaScript hook to function properly in Vue.js