AngularJS 使用 ng-repeat 显示表格中刚刚过滤的项目

Question

Is possible to hide the result of this table and just show the filtered result?

<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>

By default the page load a list of students like this

[![enter image description here][1]][1]

I would like to hide this list and just show the result of the filter above! is that possible?

Student row

<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>

Basically just want to know if i can use ng-Show just to show filtered results and hide the rest without having to changes a lot of everything

Answer 1

I am sharing the way I normally do where there's a need for searching among the grid list. I normally, take one input as a search term and search the entire list with the help of $filter in my watcher and if it matches with any key of the particular object, update the grid list instantly with the new filtered list.

I don't recommend copy pasting the code since I am using many custom directives and material design. But you can get the main idea how can you do it.

<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>

in my controller I write the watcher as :

$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);
}

Note that:

I am using gridlist as the ng-repeat list and not the actualGridList , in this way I will have the original list unmodified and gridList will be reflected back to what the original list is through my resetFilter()

If you want to filter the searchData.students based on many keywords, you can filter the list based on those keys, something similar to:

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