如何只选择angularjs中的过滤表数据?

时间:2015-06-26 11:56:41

标签: angularjs

这是我的代码:

<div>
    <input type="search" class="form-control" placeholder="Search  Student" ng-  model="stdsearch" />
</div>
<table class="table" >
    <thead>
        <tr>
            <th><input type="checkbox" ng-model="master"></th>
            <th>Admission No</th>
            <th>Student Name</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="student in ClassStudents | filter:stdsearch">
            <td><input id="checkSlave" type="checkbox" ng-checked="master" ng-model="student.isselected" aria-label="Slave input"></td>
            <td>{{student.Admission_no}}</td>
            <td>{{student.First_Name}}&nbsp;{{student.MiddleName}}&nbsp;{{student.Last_Name}}</td>
        </tr>
    </tbody>
</table>

这里我的查询是:我想检查表中的过滤行当我检查主复选框(th)。但是当我在搜索框中删除搜索文本时,这里选择了所有行的表。请建议我。 10Q。

1 个答案:

答案 0 :(得分:0)

我在这里尝试过:

the plunker是here

我已根据HTML创建了示例数据。

使用&#39; last1&#39;作为搜索值。你会有一个想法。

$scope.ClassStudents = [{Admission_no :1,First_Name:'first1' ,MiddleName: 'middle1',Last_Name:'last1'},
        {Admission_no :1,First_Name:'first2' ,MiddleName: 'middle1',Last_Name:'last1'},
        {Admission_no :1,First_Name:'first3' ,MiddleName: 'middle2',Last_Name:'last2'},
        {Admission_no :1,First_Name:'first4' ,MiddleName: 'middle3',Last_Name:'last1'}
        ];


$scope.checkUncheck = function(masterCheck){

              angular.forEach(  $scope.ClassStudents,function(value,key){

                if(masterCheck && !$scope.stdsearch){

                  value.master = true;
                }else{
                value.master = false;
         }

        })

            }

filter('customFilter',function(){

    return function(input,masterCheck,stdsearch){


        angular.forEach(input,function(value,key){
         if(stdsearch){
                if(masterCheck){
                    value.master = true;
                }else{
                value.master = false;
                }
         }

        })
        return input;
    }


})


<body ng-controller="testCtrl">
    <input type="text" ng-model="stdsearch">
    <table class="table" >
            <thead>
            <tr>
            <th><input type="checkbox" ng-model="master" ng-change = "checkUncheck(master) "></th>
            <th>Admission No</th>
            <th>Student Name</th>
            <th></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="student in ClassStudents |filter : stdsearch| customFilter : master : stdsearch">
            <td><input id="checkSlave" type="checkbox" ng-checked="student.master" ng-model="student.isselected" aria-label="Slave input"></td>
            <td>{{student.Admission_no}}</td>
            <td>{{student.First_Name}}&nbsp;{{student.MiddleName}}&nbsp;{{student.Last_Name}}</td>
            </tr>
            </tbody>
            </table>
  </body>

如果有任何错误,请告诉我。