Question

我有工厂，发送请求以获取一些数据。在响应之后，我将在控制器中接收它并创建范围列表。我必须通过选中复选框来筛选此列表。我收到了结果，但看不到。帮帮我...

$scope.checkRooms = [];
    $scope.filterRooms = function(app) {

        return function(p) {
            for (var i in $scope.checkRooms) {

                if (p.rooms == $scope.uniqueRooms[i] && $scope.checkRooms[i]) {
                    return true;
                } 
            }
        };
    };

更新2 这是工作fiddle。现在如何按ASC房间号码排序？ “orderBy”函数排序正确但房间索引排序错误

Answer 1

好的，这是一种略有不同的方法，即在控制器中完成过滤，而不是在ng-repeat中使用filter:expression。

不是唯一的方法，但我认为你应该考虑从控制器中删除任何watch函数，这使得测试控制器变得非常困难。

Fiddle

<强> HTML

<div class="filter-wrap" ng-controller="mainController">

    <div class="main-filter">
        <div class="form-group">
            <span class="gr-head">
                Rooms count
            </span>

            <div class="check-control" ng-repeat="room in uniqueRooms | orderBy: room">
                <input 
                    type="checkbox" 
                    name="room_cnt" 
                    ng-model="checkboxes[room]" 
                    ng-change='onChecked(filterRoom)' 
                />
                <label>{{room}}</label>
            </div>                          
        </div>

    </div>

    <table>
        <thead>
            <tr>
                <th>
                    <span>Rooms</span>
                </th>
                <th>
                    <span>Size</span>
                </th>       
                <th>
                    <span>Price</span>
                </th>                                
            </tr>
        </thead>

        <tbody>
            <tr ng-repeat="app in filteredApps">
                <td>{{app.rooms}}</td>
                <td>{{app.size}}</td>
                <td>{{app.price}}</td>
            </tr>
        </tbody>
    </table>

    <div class="result">
        <h2>SCOPE size</h2>
        {{filteredRooms}}
    </div>

</div>

<强> JS

var sortApp = angular.module('sortApp',[]);

sortApp.controller('mainController', function($scope, $timeout) {

    $scope.apps = [
        {
            "rooms": 2,
            "size": 55.50,
            "price": 55500.00,
        },
        {
            "rooms": 1,
            "size": 25.50,
            "price": 45000.00,
        },
        {
            "rooms": 8,
            "size": 28,
            "price": 15500.00,
        },
        {
            "rooms": 1,
            "size": 28,
            "price": 15500.00,
        },
        {
            "rooms": 8,
            "size": 28,
            "price": 15500.00,
        },
        {
            "rooms": 3,
            "size": 120.55,
            "price": 88990.00,
        },
        {
            "rooms": 3,
            "size": 120.55,
            "price": 88990.00,
        }
    ];

    $scope.filteredApps    = $scope.apps;
    $scope.uniqueRooms     = uniqueItems($scope.apps, 'rooms');
    $scope.onChecked       = filterRooms;
    $scope.checkboxes      = createCheckboxes($scope.uniqueRooms);

    function filterRooms(checkboxes){

        $scope.filteredApps = [];

        angular.forEach($scope.apps, function(app){

            if($scope.checkboxes[app.rooms]){
                $scope.filteredApps.push(app);
            }

        });

    }

    function createCheckboxes(labels){

        var checkboxes = {};

        angular.forEach(labels, function(label){
            checkboxes[label] = true;
        });

        return checkboxes;
    }

    function uniqueItems(data, key) {

        var result = [];

        for (var i = 0; i < data.length; i++) {
            var value = data[i][key];

            if (result.indexOf(value) == -1) {
                result.push(value);
            }

        }
        return result;
    };


});

Angularjs复选框多个过滤器

1 个答案: