如果选中复选框，则将结果过滤到前5个最高标记

Question

我是angularjs的新手。 我的目标是如果选中“前5个标记”复选框，则将学生的记录限制为：5。 如果未选中“前5个标记”复选框，则返回满足其他过滤条件的所有记录。

我也有其他搜索框来过滤记录。 但是，这超出了目前的范围。

我的过滤器代码目前是这样的

<div class="checkbox">
  <label>
    <input type="checkbox"/>
    Top 5 Marks
  </label>
</div>
            <tr data-ng-repeat="item in students | filter:query | orderBy: orderName">

                <td>{{item.name}}</td>
                <td>{{item.mark}}</td>
                <td>{{item.grade}}</td>
            </tr>

Answer 1

很简单，您可以使用以下代码进行操作：

<div ng-controller="MyCtrl">
        <label>Top 5</label>
        <input type="checkbox" ng-model="checked" ng-change="changeLimit(5)"/>
        <br/> <br/>
        <ul>
            <li ng-repeat="student in students | orderBy: 'mark': true | limitTo: limitNumber">
                <span>{{student.name}}</span>
                <span>{{student.mark}}</span>
            </li>
        </ul>
    </div>

您的JS代码：

function MyCtrl($scope) {      
    $scope.students = [
        { name: "Peter", mark: 10 },
        { name: "John", mark: 9 },
        { name: "Hevery", mark: 7 },
        { name: "Archy", mark: 10 },
        { name: "Michael", mark: 4 },
        { name: "Wats", mark: 4 },
        { name: "Richard", mark: 8 },
        { name: "Ivan", mark: 6 },
    ];

     $scope.limitNumber = $scope.students.length;
            $scope.changeLimit = function(limit){
        if($scope.checked){
           $scope.limitNumber = limit;
        } 
        else{
          $scope.limitNumber = $scope.students.length;      
        }
    };
};

我已将JSFiddle示例附加到帖子中。

我也建议阅读有关limitTo和orderBy过滤器的信息。