Restrict the Angular ng-repeat directive to specific rows only

Question

Restrict the Angular ng-repeat directive to specific rows only

Suppose we have a JSON dataset listing all languages of books:

$scope.data = [{
    "title": "Alice in wonderland",
    "author": "Lewis Carroll",
    "lang": ["en"]
}, {
    "title": "Journey to the West",
    "author": "Wu Cheng'en",
    "lang": ["ch"]
}]

If we only wanted to display English books using a filter in ng-repeat, is it feasible?

For instance:

<div ng-repeat="d in data | filter:d.lang='en'" style="margin-bottom: 2%">
    {{d.title}}
</div>

The objective is to achieve this without using any form control like radio buttons. Can this be done?

-EDIT- Thanks @GrizzlyMcBear for pointing me in the right direction! I managed to make it work by using a slightly modified filter function (provided below)

app.filter('MyFilter', function() {

    var out = [];
    angular.forEach(input, function(i) {

      if (i.lang[0] === 'en') {
        out.push(i);
      }
    })

    return out;
  }

});

And in the HTML:

<div ng-repeat="d in data | MyFilter" style="margin-bottom: 2%">
    {{d.title}}
</div>

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

Give this a try

<div ng-repeat="item in items | filter: { category : 'food'} " style="margin-bottom: 2%">

DEMO

Answer 2

Give this a try

<div ng-repeat="item in items | filter: { category : 'food'} " style="margin-bottom: 2%">

DEMO

Answer 3

Answer №2

If you want to enhance your data filtering capabilities in Angular, try using the filter feature.

A useful tip is to implement a custom filtering function like this:

<div ng-repeat="item in collection | filter:filteringFunction" style="margin-bottom: 2%">
    {{d.title}}
</div>

This method provides flexibility in creating intricate filtering logic for your data.

var filteredLang = "en";

function filterByBookLanguage(collectionItem) {
    var result = false;

    if (collectionItem.lang[0] === filteredLang) {
        result = true;
    }

    return result;
}

$scope.filteringFunction = filterByBookLanguage;

You can easily modify the comparator function (filterByBookLanguage) as needed.

For example, if your boss suddenly wants to switch from filtering books to filtering by author name, just add this condition:

if (bossWantsToChangeFilter) {
    $scope.filteringFunction = filterByAuthorName;
} else {
    $scope.filteringFunction = filterByBookLanguage;
}

Remember to update the comparator function with the appropriate arguments and values based on your requirements.

Answer 4

If you want to enhance your data filtering capabilities in Angular, try using the filter feature.

A useful tip is to implement a custom filtering function like this:

<div ng-repeat="item in collection | filter:filteringFunction" style="margin-bottom: 2%">
    {{d.title}}
</div>

This method provides flexibility in creating intricate filtering logic for your data.

var filteredLang = "en";

function filterByBookLanguage(collectionItem) {
    var result = false;

    if (collectionItem.lang[0] === filteredLang) {
        result = true;
    }

    return result;
}

$scope.filteringFunction = filterByBookLanguage;

You can easily modify the comparator function (filterByBookLanguage) as needed.

For example, if your boss suddenly wants to switch from filtering books to filtering by author name, just add this condition:

if (bossWantsToChangeFilter) {
    $scope.filteringFunction = filterByAuthorName;
} else {
    $scope.filteringFunction = filterByBookLanguage;
}

Remember to update the comparator function with the appropriate arguments and values based on your requirements.

Restrict the Angular ng-repeat directive to specific rows only

Answer №1

Answer №2

Similar questions

Having trouble choosing elements with angular.element within ng-repeat loop

Having trouble connecting to the webserver? Make sure the web server is up and running, and that incoming HTTP requests are not being blocked by a firewall

Altering the color upon repetition and utilizing JQuery coordinates for the dynamic movement of elements

A guide on updating data dynamically in Vue.js

CoffeeScript is failing to run the code

Concealing objects identified by a specific id

A step-by-step guide on how to repeatedly reload a nextJS page using recursion and display an error page once the

Use React to increment a variable by a random value until it reaches a specific threshold

Prevent the browser from autofilling password information in a React Material UI textfield when it is in focus

Using a split string to destructure an array with a mix of let and const variables

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

Activate the class using Vue with the v-for directive

Display the text from a function in an imported component using React

Using jquery to update a link when a different link is clicked

Best practice for integrating Typescript into an established ASP.NET 4 Webforms project

How to animate a left border shifting to the center using JavaScript

Bringing in functions - NodeJS - non-HTML

Unable to locate the AngularJS controller after attempting to paste the code

Step-by-step guide on incorporating a hyperlink within a row using @material-ui/data-grid

Guide on Sending a POST Request via HTTPS in Websites