Filter ng-repeat items based on numeric conditional

Question

Trying to use a select menu to filter items based on greater than/less than conditional.

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
    }];

So I want the select menu to filter the images repeat based on a greater than like count.

So something like <option value="likes > 10">> 10</option> <option value="likes > 10">> 10</option> Would filter my ng-repeat and show only images with a greater than 10 like count.

Can anyone point me in the right direction?

Answer 1

You can use a function to filter your images. Try this snippet:

 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>

Filter ng-repeat items based on numeric conditional

Question

1 answers

solution1
1 ACCPTED 2014-10-01 19:25:44

Filter ng-repeat items based on numeric conditional

Question

1 answers

solution1 1 ACCPTED 2014-10-01 19:25:44

solution1
1 ACCPTED 2014-10-01 19:25:44