根据数值条件过滤 ng-repeat 项目答案

【问题标题】：Filter ng-repeat items based on numeric conditional根据数值条件过滤 ng-repeat 项目
【发布时间】：2014-10-02 03:25:44
【问题描述】：

尝试使用选择菜单根据大于/小于条件过滤项目。

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

所以我希望选择菜单根据大于喜欢的计数过滤重复的图像。

所以像<option value="likes > 10">&gt; 10</option> 这样的东西会过滤我的 ng-repeat 并只显示点赞数大于 10 的图像。

谁能指出我正确的方向？

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

您可以使用函数来过滤图像。试试这个 sn-p：

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>

【讨论】：

谢谢！我觉得我做得比本来应该做的更难哈哈。