Question

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

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">> 10</option>这样的东西会过滤我的ng-repeat并只显示大于10的图像。

有人能指出我正确的方向吗？

Answer 1

您可以使用功能过滤图像。试试这个片段：

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>

根据数字条件过滤ng-repeat项目

1 个答案: