如何在進行過濾後在Angular JS中獲得可見的表格行

我使用html（table，tr，td）和angularJS顯示了表格上的列表。表格還包含列上的過濾器。表格正確填充數據，過濾器使用AngularJS正常工作。如何在進行過濾後在Angular JS中獲得可見的表格行

做了一些過濾之後，我想在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>

來源

2017-03-08 Vishal

做這樣的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)

來源

2017-03-08 10:42:47

謝謝 – Vishal

只用於（var i = 0; i <$ scope.filerList.length; i ++）{ \t \t \t \t alert（$ scope .filerList [i] .commodityName）; \t \t}看到 –

該環表示所有值即計算機（PC），筆記本電腦，鍵盤，鼠標的出把作爲警報。假設我鍵入s.commodityName文本框圈，然後點擊「顯示可見行」按鈕，那麼它應該只顯示筆記本電腦。請幫助我如何實現這一目標。 – Vishal

如何在進行過濾後在Angular JS中獲得可見的表格行

回答

相關問題