Screen ng-repeat elements according to numerical conditions

Is there a way to utilize a select menu for filtering items based on greater than/less than conditions?

HTML:

        <select name="likes-filter" id="likes-filter" class="form-control" data-ng-model="filterValue">
            <option value="0">0</option>
            <option value="10">&gt; 10</option>
            <option value="20">&gt; 20</option>
            <option value="50">&gt; 50</option>
            <option value="100">&gt; 100</option>
            <option value="500">&gt; 500</option>
            <option value="1000">&gt; 1000</option>
        </select>

    <div class="image-container" data-ng-repeat="image in images | filter: filterValue | orderBy: dateSubmitted">

        <div class="like-wrapper">
            <i class="glyphicon glyphicon-heart"></i>
            <p>{{image.likes}}</p>
        </div>

        <p class="date">{{image.dateSubmitted | date: 'medium'}}</p>

        <img data-ng-src="{{image.path}}" alt="Image">
        <span class="btn" data-ng-click="confirmImageDelete(image)">&times;</span>
    </div>

JS:

$scope.images = [
    {
        dateSubmitted: new Date(),
        path: "/images/profile-placeholder-250x250.gif",
        likes: 5
    },
    {
        dateSubmitted: new Date(),
        path: "/images/profile-placeholder-250x250.gif",
        likes: 9
    }];

If I want the select menu to filter the images repeat based on a greater than like count, how can this be achieved?

For example, 

<option value="likes > 10">&gt; 10</option>
should only display images with a like count greater than 10.

Any assistance or guidance would be greatly appreciated. Thank you!

javascriptangularjsangularjs-ng-repeat

Answer №1

To refine your image selection, you can implement a filtering function. Give this code a try:

angular.module('MyApp', [])
.controller('MyController', ['$scope', function($scope) {
    $scope.filterValue = 10;
  $scope.images = [
    {
        dateSubmitted: new Date(),
        path: "http://www.blinkawards.com/Images/profilePhoto.gif",
        likes: 5
    },
    {
        dateSubmitted: new Date(),
        path: "http://www.blinkawards.com/Images/profilePhoto.gif",
        likes: 9
    },
    {
        dateSubmitted: new Date(),
        path: "http://www.blinkawards.com/Images/profilePhoto.gif",
        likes: 90
    },
    {
        dateSubmitted: new Date(),
        path: "http://www.blinkawards.com/Images/profilePhoto.gif",
        likes: 190
    },
    {
        dateSubmitted: new Date(),
        path: "http://www.blinkawards.com/Images/profilePhoto.gif",
        likes: 1009
    }];
    
    $scope.filterByLikes = function(image) {
        return image.likes > parseInt($scope.filterValue);
    }
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyApp">
    <div ng-controller="MyController">
<select name="likes-filter" id="likes-filter" class="form-control" data-ng-model="filterValue">
            <option value="0">0</option>
            <option value="10">&gt; 10</option>
            <option value="20">&gt; 20</option>
            <option value="50">&gt; 50</option>
            <option value="100">&gt; 100</option>
            <option value="500">&gt; 500</option>
            <option value="1000">&gt; 1000</option>
        </select>

    <div class="image-container" data-ng-repeat="image in images | filter: filterByLikes | orderBy: dateSubmitted">

        <div class="like-wrapper">
            <i class="glyphicon glyphicon-heart"></i>
            <p>{{image.likes}}</p>
        </div>

        <p class="date">{{image.dateSubmitted | date: 'medium'}}</p>

        <img data-ng-src="{{image.path}}" alt="Image" width="30px">
        <span class="btn" data-ng-click="confirmImageDelete(image)">&times;</span>
    </div>
        </div>
    </body>

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

What is the best way to implement a dynamic for-loop?

I need to calculate the sum of multiple arrays. For example, I have a 2D array with an initial length of 2, but the length will change dynamically. Each element must have a length of 3. function addSum(){ let length =3; //calculate sum of two arra ...

javascriptarraysfor-loopdynamiccombinations

Strategies for detecting when the focus has moved away from a Div

I'm currently developing a dynamic form that generates multiple Divs. My goal is to detect when the focus is lost from an entire div, not just from one input field. https://i.sstatic.net/YopGs.png As shown in the image, I have several identical form ...

javascriptangularjsonblur

Tips for incorporating the .click function with an overlay

Having some trouble using the .click function in conjunction with jQuery Tools overlay. HTML: <p id="click">Click here:</p> <div class="pop"> <div> <p>Insert text here</p> </div> </div> jQuery func ...

javascriptjqueryhtml

AngularJS - div continues to display even when the condition is not met

Alright, so the title may need some improvement, but I'm struggling to find a better way to phrase it. Let me set the scene for you. I've got this potentially massive table that's being generated using an ng-repeat. Every row needs to be e ...

angularjs

Placing the cursor on a newly created element is ineffective when the innerHtml is empty

https://codesandbox.io/s/nameless-feather-duk25?fontsize=14&hidenavigation=1&theme=dark In the code example above, I am trying to make a certain feature work. The concept is as follows: there is a contentEditable div element where text can be type ...

javascriptreactjscontenteditable

Combine two collections into a single collection in MongoDB using JavaScript

I have been attempting to merge two collections into a new collection while inserting the resulting data into the new collection. Here is the code I am using for the merge: db.users.aggregate( [{ $lookup: { from: "posts", localField: "_ ...

javascriptmongodbaggregate-functions

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

function convertImageResolution(img) { var canvas = document.createElement("canvas"); if (img.width * img.height < 921600) { // Less than 480p canvas.width = 1920; canvas.height = 1080; } else if (img.width * img.he ...

javascripthtmlcss

Changing perspectives in angular does not automatically alter the controller

I am working on a basic Angular app that utilizes two templates and controllers. The app features two buttons for switching views, each calling a function within the controllers to switch locations using window.location=''. However, I've en ...

javascriptangularjscontrollerview

What could be causing issues with my JavaScript AJAX?

I'm in the process of developing a basic chat system that automatically loads new messages as they come in. Initially, I used to fetch all messages from the database. However, I encountered an issue where the scroll bar would constantly jump to the bo ...

javascriptphpjqueryajaxchat

Encountered an issue while trying to retrieve a value from an object within a

Reviewing the following JSON response: [ {"name": "Afghanistan", ...}, {"name": "country 2" ,...}, {"name": "country 3" ,...}, ] My goal is to extract only country names from t ...

javascriptjson

Having difficulty grasping the concept of AngularJS Promises

As I deepen my understanding of AngularJS, I find myself faced with the challenge of adapting code examples to fit my own projects. In this particular example sourced from Urish, it is clear that the variable "promise" must encompass the necessary functio ...

javascriptangularjspromiseangular-resource

User currently signed in: What specific information should be transmitted to the web browser?

Experience: Currently utilizing the MEAN stack for a web application and still in the learning process. The Concern: I am facing some confusion regarding a particular aspect. For instance, if a user is logged in (using Passport.js), I can access their inf ...

javascriptangularjsnode.jsauthenticationpassport.js

troubleshooting knockout.js if bindings

It appears that the if binding is not functioning as expected in my case. Below is a snippet of my template: <div> <span data-bind="text: name"></span> <div data-bind="if: false ">+<span data-bind="text: priceFormatted" ...

javascriptif-statementknockout.jsdata-binding

Create a custom shader material to display a video with THREE

As I embark on loading a video onto an animated WebGL plane with a custom shader material, my approach involves using a pre-loaded video to draw an image onto a canvas and then passing it to my shader uniforms in the render loop: // Render loop useFrame(( ...

javascriptvideothree.js

Switching Iframe Source with Javascript Button State

I'm currently working on creating a set of toggle buttons for a website that will change the content of an iframe depending on the combination of buttons selected. Let's say I want to display a product that is available in: - Three colors: Red, ...

javascriptjqueryhtmliframe

What could be causing my text to not adapt to a mobile device screen?

Using my MacBook with a display size of 15.4-inch (2880 x 1800), I have captured screenshots of different sections of my homepage to show how they appear. #app (section1) https://i.sstatic.net/QjrXe.png #section2 (section2) https://i.sstatic.net/5HWp0. ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

What is the process for extracting information from one table based on a column's data in another table?

Let's consider two tables: Table 1 id | email 1 | email1 2 | email2 Table 2 userid | username 2 | user1 3 | user2 Now, with the help of sails.js associations, here is what I aim to achieve: I have a username = user1. What I need to a ...

javascriptmysqlnode.jssails.js

The act of receiving becomes ineffective when it was intended to be functional - Nextjs/JavaScript

When using nextjs, I encountered an issue while trying to map my array to getstaticpaths for generating getstaticprops. Every time I attempted to map the result, I received an error stating 'mycatagoriesis not a function'. Below is a snippet fro ...

javascriptreactjsarraysnext.jsmapping

Locate every occurrence of the word 'ancient' on a webpage and substitute each one with 'modern' by utilizing a javascript bookmarklet

Is there a way to replace every occurrence of the word 'old' with 'new' on a webpage using a JS bookmarklet or greasemonkey script? I'm open to using jQuery or other frameworks if needed, as I've heard there are ways to incorp ...

javascriptscriptinggreasemonkeybookmarkletreplace

Tips to troubleshoot problem with Javascript ``addEventListener`` ``click`` not functioning

I've been attempting to incorporate the "addEventListener" feature into my code. Despite following an example, I can't seem to get it to work. Is there something I'm missing or doing wrong? <body> <div class="emoji-row ng-s ...

javascriptangularjsdom