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

Leverage JavaScript E4X to cleverly rename specific XML elements

JavaScript Code: Empty a text box when a different one is active

Event not tracking properly due to missing label in GA event firing

The process of enabling NPM packages for use with ES6 and ECMAScript

Issues with AngularJS data binding and templating not functioning correctly on Internet Explorer 8

Guide to simulating a scope in an Angular unit test using a directive instead of a controller

Troubleshooting Problem with Creating a Button using HTML Checkbox "onclick" Event

What is the method for inserting a new <p> tag whenever a user sends a new message in ReactJS?

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

The comparison between importing TypeScript and ES2015 modules

Creating a new database row dynamically with PHP, JavaScript, and AJAX

jQuery selector for attributes with values that are higher than a specific amount using the ">" symbol or lower than a certain value using the "<" symbol

What is the process for updating the Vue template during runtime?

Issues with rendering AngularJS onto an HTML page are currently being experienced

What is the best way to send an object array from an express function to be displayed on the frontend?

Encountering an "Unexpected token '{'" error while attempting to import chart.js is likely due to the import call expecting only one argument

Issue with php and ajax causing loop malfunction

It's not possible to add additional options to the select input in a react

Can you locate the hiding spot of the express-session cookie?

Stop JQuery from executing when an error is caught