Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript AngularJS使用ng repeat在表中显示刚刚筛选的项_Javascript_Angularjs_Angular Filters - Fatal编程技术网

Javascript AngularJS使用ng repeat在表中显示刚刚筛选的项

Javascript AngularJS使用ng repeat在表中显示刚刚筛选的项,javascript,angularjs,angular-filters,Javascript,Angularjs,Angular Filters,是否可以隐藏此表的结果并仅显示筛选的结果 希德 名称 通路 顾问 信用 校园 行动 默认情况下,页面加载一个学生列表,如下所示 [![在此处输入图像描述][1][1] 我想隐藏这个列表,只显示上面过滤器的结果! 可能吗 学生排 <tr ng-class="{awesome:s.selected}"> <td><input name="checker" type="checkbox" value="selected" ng-model="s.selected"&g

是否可以隐藏此表的结果并仅显示筛选的结果


希德
名称
通路
顾问
信用
校园
行动
默认情况下,页面加载一个学生列表,如下所示

[![在此处输入图像描述][1][1]

我想隐藏这个列表,只显示上面过滤器的结果! 可能吗

学生排

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

{{s.sid}}
{{s.lastName.trim()+','+s.firstName}}
{{s.pathwayName+(s.subPathwayName?','+s.subPathwayName:'')}
{{s.advisorName}
{{s.credits}}
{{s.branchCodeDescription}}

搜索过滤器

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

搜寻
通路
选择途径
感兴趣的领域
选择感兴趣的区域
顾问
选择顾问
没有顾问
{{a.lastName+','+a.firstName}
信用
校园
选择校园
{{b.description}}
登记
强制性的
搜索
重置

基本上,我只是想知道我是否可以使用ng Show来显示过滤后的结果并隐藏其余结果,而无需对所有内容进行大量更改

在需要在网格列表中搜索的地方,我正在分享我通常的做法。我通常将一个输入作为
搜索项
,并在我的
观察者
中的
$filter
帮助下搜索整个列表,如果它与特定对象的任何键匹配,则立即用新的过滤列表更新网格列表

我不建议复制粘贴代码,因为我使用了许多自定义指令和材质设计。但是你可以知道你怎么做

<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>
请注意:

我使用
gridlist
作为
ng repeat
列表,而不是
actualGridList
,这样我就可以不修改原始列表,
gridlist
将通过我的
resetFilter()

如果要根据多个关键字筛选
searchData.students
,可以根据这些关键字筛选列表,类似于:

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

不要看到angularjs控制器和搜索过滤器代码。对于类似的东西,最好在控制器中进行过滤,而不是作为
ng repeat
指令的一部分。特别是当你希望能够过滤多个下拉列表以及一些文本标准的选择时。开发这个系统的人已经不在这里了,所以我正在尝试支持这个门户
$scope.copStudents = $filter('filter')($scope.searchData.students, 
    { 'name': keyword }, true);