There is the following view:

angular.module('app', []).controller('ctrl', function($scope) { var types = [{ name: 'Аварийная', selected: false }, { name: 'Плановая', selected: false }]; var requests = [{ id: 1, type: 'Аварийная' }, { id: 2, type: 'Плановая' }, { id: 3, type: 'Аварийная' }, { id: 4, type: 'Плановая' }]; $scope.types = types; $scope.requests = requests; }); 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <div class="container" ng-app="app" ng-controller="ctrl"> <div class="panel panel-default"> <div class="panel-heading"> Параметры отчета </div> <div class="panel-body"> <div class="form-group" ng-repeat="type in types"> <div class="checkbox"> <label> <input type="checkbox" ng-model="type.selected" />{{type.name}}</label> </div> </div> </div> <table class="table table-bordered"> <tr> <td>№</td> <td>Тип заявки</td> </tr> <tr ng-repeat="request in requests"> <td>{{request.id}}</td> <td>{{request.type}}</td> </tr> </table> </div> </div>

Tell me how to filter the data, i.e. the user marks the required Types and the table displays only the relevant data?

    1 answer 1

    Since the flags are already there, it is worth filtering by them, for this you need to specify not the name , but the selected in the filter.

     angular.module('app', []).controller('ctrl', function($scope) { var types = [{ name: 'type 1', selected: false }, { name: 'type 2', selected: false }, { name: 'type 3', selected: false }, ]; $scope.types = types; }); 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <div class="container" ng-app="app" ng-controller="ctrl"> <div class="panel panel-default"> <div class="panel-heading"> Параметры отчета </div> <div class="panel-body"> <div class="form-group" ng-repeat="type in types"> <div class="checkbox"> <label> <input type="checkbox" ng-model="type.selected" />{{type.name}}</label> </div> </div> </div> <table> <tr>Тип</tr> <tr ng-repeat="type in types | filter:{selected:true}"> <td>{{type.name}}</td> </tr> </table> </div> </div>

    Update
    A parameter of the filter function may be not only an object with fields to filter by, but also a function that for this element should return if it matches the filter or not.

    for example

     angular.module('app', []).controller('ctrl', function($scope) { var types = [{ name: 'Аварийная', selected: false }, { name: 'Плановая', selected: false }]; var requests = [{ id: 1, type: 'Аварийная' }, { id: 2, type: 'Плановая' }, { id: 3, type: 'Аварийная' }, { id: 4, type: 'Плановая' }]; $scope.types = types; $scope.requests = requests; // если тип выбран $scope.checker = function(el) { return types.some(function(t) { return t.selected && t.name == el.type }); } }); 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <div class="container" ng-app="app" ng-controller="ctrl"> <div class="panel panel-default"> <div class="panel-heading"> Параметры отчета </div> <div class="panel-body"> <div class="form-group" ng-repeat="type in types"> <div class="checkbox"> <label> <input type="checkbox" ng-model="type.selected" />{{type.name}}</label> </div> </div> </div> <table class="table table-bordered"> <tr> <td>№</td> <td>Тип заявки</td> </tr> <tr ng-repeat="request in requests | filter:checker"> <td>{{request.id}}</td> <td>{{request.type}}</td> </tr> </table> </div> </div>