AngularJS Показать только что отфильтрованные элементы в таблице с помощью ng-repeat

Question

Можно ли скрыть результат этой таблицы и просто показать отфильтрованный результат?

<table class="table table-responsive" ng-class="{'table- 
striped':!spinnerVisible}">
                    <thead class="thead-inverse">
                        <tr>
                            <th><input type="checkbox" value="selected" ng- 
             model="checkboxes.checkAll" ng-click="checkAllRows()"></th>
                            <th>SID</th>
                            <th>Name</th>
                            <th>Pathway</th>
                            <th>Advisor</th>
                            <th>Credits</th>
                            <th>Campus</th>
                            <th ng-if="isPathwayLead">Action</th>
                        </tr>
                    </thead>
                    <tr ng-repeat="s in           
                   searchData.students|orderBy:'lastName' |filter:search | 
                   range:selectedPage:pageSize" student-row></tr>
                </table>

По умолчанию на странице загружается список таких учеников, как этот

Я хотел бы скрыть этот список и просто показать результат фильтра выше!это возможно?

Студенческий ряд

<tr ng-class="{awesome:s.selected}">
<td><input name="checker" type="checkbox" value="selected" ng-model="s.selected"></td>
<td><a class="clickableAwesomeFont" ng-click="toStudent(s.sid)">{{s.sid}}</a></td>
<td>{{s.lastName.trim() + ', ' + s.firstName}}</td>
<td>{{s.pathwayName + (s.subPathwayName ? ', ' + s.subPathwayName : '')}}</td>
<td>{{s.advisorName}}</td>
<td>{{s.credits}}</td>
<td>{{s.branchCodeDescription}}</td>
<td ng-if="isPathwayLead"><span class="card-title fa fa-pencil-square-o pull-right clickableAwesomeFont" ng-click="popupReviewForm(s)"></span></td>

SearchFilter

<div>
    <div style="padding-top:100px;" id="mid_container" class="container">
        <div class="row">
            <div class="col-md-5 col-sm-6 col-xs-6">
                <label for="search-term">Search</label>
                <input id="search-term" type="text" ng- 
          keyup="$event.keyCode == 13 && commenceSearch()" ng- 
            model="searchModel.searchTerm"
                       class="form-control" placeholder="Name or SID" 
               aria-describedby="sizing-addon3">
                <label for="pathway_dd">Pathway</label>
                <select id="pathway_dd" class="form-control custom" ng- 
          change=onPathwayChange() ng-options="p.id as p.name for p in 
             pathways"
                        ng-model="searchModel.pathwayID">
                    <option value="">Select Pathway</option>
                </select>
                <label for="subPathway_dd">Area of Interest</label>
                <select id="subPathway_dd" class="form-control custom" ng- 
        options="sp.id as sp.name for sp in subPathways" ng- 
        model="searchModel.subPathwayID">
                    <option value="">Select Area of Interest</option>
                </select>
            </div>
            <div class="col-md-5 col-sm-6 col-xs-6">
                <label for="advisor_dd">Advisor</label>
                <select id="advisor_dd" class="form-control custom" ng- 
            model="searchModel.advisorSID">
                    <option value="">Select Advisor</option>
                    <option value="noadvisor">No Advisor</option>
                    <option ng-repeat="a in advisors| orderBy:'lastName'" 
            value="{{a.sid}}">{{a.lastName + ', ' + a.firstName}}</option>
                </select>
                <label for="credit-select">Credits</label>
                <select id="credit-select" class="form-control custom" ng- 
          model="searchModel.creditID" value="c.id" ng-options="c.id as 
          c.text for c in credits" />
                <label for="campus_dd">Campus</label>
                <select id="campus_dd" class="form-control custom" ng- 
                model="searchModel.branchCode">
                    <option value="">Select Campus</option>
                    <option ng-repeat="b in branches" value=" 
          {{b.branchCode}}">{{b.description}}</option>
                </select>
            </div>
            <div class="col-md-2 col-sm-12 col-xs-12">
                <div class="checkbox">
                    <label>
                        <input ng-model="searchModel.isEnrolled" 
                    type="checkbox">Enrolled
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input ng-model="searchModel.isMandatory" 
           type="checkbox">Mandatory
                    </label>
                </div>
                <button class="btn btn-primary btn-lg btn-block" ng- 
     click="commenceSearch()"><span class="glyphicon glyphicon-search" 
     title="Apply Search Filters" />&nbsp;Search</button><br />
                <button class="btn btn-default btn-sm" ng-

        click="clearSearch()"><span class="glyphicon glyphicon-refresh" 
        title="Reset Search Filters" />&nbsp;Reset</button>
                <!--<button class="btn btn-default btn-sm" ng- 
        click="toggleFilter()"><span class="glyphicon glyphicon-remove" 
          title="Close Search Filter Panel" />&nbsp;Close</button>-->
            </div>
        </div>
    </div>
</div>

В основном просто хочу знать, могу ли я использовать ng-Show простопоказывать отфильтрованные результаты и скрывать все остальное, не изменяя многое

Answer 1

Я делюсь тем, что обычно делаю, где есть необходимость поиска среди списка сетки.Я обычно беру один вход как search term и ищу весь список с помощью $filter в моем watcher, и, если он совпадает с любым ключом конкретного объекта, немедленно обновите список сетки с новым отфильтрованным списком,

Я не рекомендую копировать, вставляя код, так как я использую много пользовательских директив и дизайн материала.Но вы можете понять основную идею, как вы можете это сделать.

<md-toolbar style="background-color:#F57C00 !important;" ng-show="showSearch">
            <div class="md-toolbar-tools">
            <md-input-container class="md-block" flex-gt-sm>
                <md-icon style="color:white">search</md-icon>
                <input type="text" ng-model="searchPhrase" style="color:white" name="searchPhrase">
            </md-input-container>
            <md-button ng-click="resetFilter()" class="md-icon-button">
                <md-tooltip style="background-color:lightgray;color:black" md-direction="top">close</md-tooltip>
                <md-icon>close</md-icon>
            </md-button>
            </div>
        </md-toolbar>

в моем контроллере я пишу наблюдателю как:

$scope.$watch('searchPhrase', function (keyword) {
            if (keyword!= null && keyword!= '' && keyword!= undefined)
                $scope.gridList = ($filter('filter')($scope.actualGridList, keyword)); 

            // incase keyword was empty, change the list back to original
            else 
                $scope.gridList = angular.copy($scope.actualGridList);
        });

//incase reset button was pressed, change the list back to original
    $scope.resetFilter = function () {
                $scope.showSearch = false;
                $scope.searchPhrase = '';
                $scope.gridList = angular.copy($scope.actualGridList);
            }

Обратите внимание, что:

IЯ использую gridlist в качестве списка ng-repeat, а не actualGridList, таким образом, исходный список останется неизменным, и gridList будет отражен обратно к исходному списку через мой resetFilter()

Если вы хотите отфильтровать searchData.students по многим ключевым словам, вы можете отфильтровать список по этим ключам, что-то вроде:

$scope.copStudents = $filter('filter')($scope.searchData.students, { 'name': keyword }, true);