如何在进行过滤后在Angular JS中获得可见的表格行

Question

我使用html（table，tr，td）和angularJS显示了表格上的列表。表格还包含列上的过滤器。表格正确填充数据，过滤器使用AngularJS正常工作。

做了一些过滤之后，我想在angularJS的一个函数中只显示可见的行。

如何在少量滤镜之后获得angularJS中表格的可见行？

请注意，我没有使用任何复选框或单选按钮的数据列表。

请参阅下面我的代码：

var myapp=angular.module("myapp",[]); 

myapp.controller('ctrcommodity',['$scope',function($scope) { 
    $scope.commodity={ 
    allPreferredCommodity: [ 
     { 
      "commodityId": "2016070011220000141", 
      "commodityName": "Computer (PC)" 
     }, 
     { 
      "commodityId": "2016080011220000004", 
      "commodityName": "Laptop" 

     }, 
     { 
      "commodityId": "2016070011220000032", 
      "commodityName": "Keyboard" 
     }, 
     { 
      "commodityId": "2016080011220000054", 
      "commodityName": "Mouser" 
     } 
     ] 
    }; 

    $scope.getVisibleRows=function() 
    { 
     //want to get details of visible rows after filtration 
    } 

}]);     

<table border="1" cellpadding="0" cellspacing="0"> 
<thead> 
    <tr> 
     <th>Commodity Id</th> 
     <th>Commodity Name</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td><input type="text" name="txtcid" id="txtcid" ng-model="s.commodityId"></td> 
     <td><input type="text" name="txtcname" id="txtcname" ng-model="s.commodityName"></td> 
    </tr> 
    <tr ng-repeat="commoditylist in commodity.allPreferredCommodity | filter:s"> 
     <td>{{commoditylist.commodityId}}</td> 
     <td>{{commoditylist.commodityName}}</td> 
    </tr> 
    <tr> 
     <td align="center" colspan="6" height="50"> 
      <input type="button" value="Show Visible Rows" ng-click="getVisibleRows()"> 
     </td> 
    </tr> 

</tbody> 

Answer 1

做这样的follwing。我改变你的功能

$scope.getVisibleRows=function(arrayData,s) 
    { 
     console.log(s); 

     $scope.filerList=$filter('filter')(arrayData,s); 
     alert(  $scope.filerList); 
     //want to get details of visible rows after filtration 
    } 

，同样改变它的html也喜欢NG-click="getVisibleRows(commodity.allPreferredCommodity,s)"

不要忘记注入过滤器，控制器像myapp.controller（“ctrcommodity”，['$scope','$filter',function($scope,$filter)