Angular.jsの指定した列でテーブルをフィルタリングする

指定したフィールドでフィルタリングテーブルに問題があります。 Here`saテーブル画像： enter image description here Angular.jsの指定した列でテーブルをフィルタリングする

テーブルのHere`sコード：

<div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 

 
      <div class="btn-group" role="group"> 
 
    \t \t \t \t <button type="button" class="btn btn-default" ng-repeat="years in history.yearbtn" ng-click="history.SelectYear($index=years.year)">{{years.year}}</button> 
 
    \t \t \t \t 
 
\t \t \t </div> 
 
      
 
    \t \t </div> 
 
      
 
      <div class="panel-body"> 
 
      <div class="container"> 
 
       <table class="table"> 
 
        <thead> 
 
         <tr> 
 
          <th>Amount</th> 
 
          <th>Kind</th> 
 
          <th>Month</th> 
 
          <th>Year</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr ng-repeat="historys in history.data | filter:{}"> 
 
          <td>{{historys.amount}}</td> 
 
          <td>{{historys.kind}}</td> 
 
          <td>{{historys.month}}</td> 
 
          <td>{{historys.year}}</td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
       </div> 
 
      </div> 
 
      <div class="panel-footer"> 
 
       <div class="btn-group" role="group" > 
 
    \t \t \t \t <button type="button" class="btn btn-default" ng-click= history.SelectMounth($index=mounth.mounth) ng-repeat="mounth in history.mounthbtn">{{mounth.mounth}}</button> 
 
    \t \t \t \t 
 
</div> 
 
      </div> 
 
     </div>

とコントローラ用のコードをhere`s：

angular.module("CoinKeeperApp",[]) 
.controller('historyCtr',function() { 


    var self = this; 

this.data = [ 
    {amount:'200 USD',kind:'income',month: 'March', year:'2022'}, 
    {amount:'214 USD',kind:'income', month: 'February', year:'2022'}, 
    {amount:'2015 USD',kind:'income', month: 'June', year:'2017'}, 
    {amount:'211 USD',kind:'expens', month: 'July', year:'2017'}, 
    {amount:'213 USD',kind:'expens', month: 'December', year:'2015'}, 
    {amount:'213 USD',kind:'expens', month: 'October', year:'2015'}, 
    ]; 

this.yearbtn = [ 
     {year:'2022'}, 
     {year:'2021'}, 
     {year:'2019'}, 
     {year:'2018'}, 
     {year:'2017'}, 
     {year:'2016'}, 
     {year:'2015'}, 
]; 

this.mounthbtn = [ 
    {mounth:'January'}, 
    {mounth:'February'}, 
    {mounth:'March'}, 
    {mounth:'April'}, 
    {mounth:'May'}, 
    {mounth:'June'}, 
    {mounth:'July'}, 
    {mounth:'August'}, 
    {mounth:'September'}, 
    {mounth:'October'}, 
    {mounth:'November'}, 
    {mounth:'December'}, 

];

私が必要「年」列のみで表をフィルタリングします。角度フィルターを使って私はどのようにすることができますか？

出典

2017-06-24 Sem Horse

この

<button type="button" 
ng-repeat="years in history.yearbtn" ng-click="history.selectedYear = years">{{years.year}}</button>

を試してみて、このようにフィルタリング：私はすべてのtdのための角度2（typescriptです）プット入力ボックスに同じ行わ

<tr ng-repeat="historys in history.data | filter:{'year':history.selectedYear}">

出典

2017-06-24 10:59:21

と

(keyup)="sortBy(header)

のような機能をkeyUpイベント書きます

は、

のような機能を実装しています。

alldata=[]/*this is u r json data*/ 
    sortBy(prop: string): void { 

     this.filteredData = this.allData.filter(el => 
     el[prop] && el[prop].toString().includes(this.query[prop])) 

     }

出典

2017-06-24 11:06:24 harish

<!DOCTYPE html> 
 
<html lang="en-US"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
       <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 

 
      <div class="btn-group" role="group"> 
 
    \t \t \t \t <button type="button" class="btn btn-default" ng-repeat="years in yearbtn" ng-click="SelectYear(years)">{{years.year}}</button> 
 
\t \t \t </div> 
 
      
 
    \t \t </div> 
 
      
 
      <div class="panel-body"> 
 
      <div class="container"> 
 
       <table class="table"> 
 
        <thead> 
 
         <tr> 
 
          <th>Amount</th> 
 
          <th>Kind</th> 
 
          <th>Month</th> 
 
          <th>Year</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr ng-repeat="historys in data |filter:{'year':filterData}"> 
 
          <td>{{historys.amount}}</td> 
 
          <td>{{historys.kind}}</td> 
 
          <td>{{historys.month}}</td> 
 
          <td>{{historys.year}}</td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
       </div> 
 
      </div> 
 
      <div class="panel-footer"> 
 
       <div class="btn-group" role="group" > 
 
    \t \t \t \t <button type="button" class="btn btn-default" ng-click='SelectMounth(mounth)' ng-repeat="mounth in mounthbtn">{{mounth.mounth}}</button> 
 
    \t \t \t \t 
 
</div> 
 

 
</div> 
 

 
</body> 
 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 

 

 
$scope.data = [ 
 
    {amount:'200 USD',kind:'income',month: 'March', year:'2022'}, 
 
    {amount:'214 USD',kind:'income', month: 'February', year:'2022'}, 
 
    {amount:'2015 USD',kind:'income', month: 'June', year:'2017'}, 
 
    {amount:'211 USD',kind:'expens', month: 'July', year:'2017'}, 
 
    {amount:'213 USD',kind:'expens', month: 'December', year:'2015'}, 
 
    {amount:'213 USD',kind:'expens', month: 'October', year:'2015'}, 
 
    ]; 
 

 
$scope.yearbtn = [ 
 
     {year:'2022'}, 
 
     {year:'2021'}, 
 
     {year:'2019'}, 
 
     {year:'2018'}, 
 
     {year:'2017'}, 
 
     {year:'2016'}, 
 
     {year:'2015'}, 
 
]; 
 

 
$scope.mounthbtn = [ 
 
    {mounth:'January'}, 
 
    {mounth:'February'}, 
 
    {mounth:'March'}, 
 
    {mounth:'April'}, 
 
    {mounth:'May'}, 
 
    {mounth:'June'}, 
 
    {mounth:'July'}, 
 
    {mounth:'August'}, 
 
    {mounth:'September'}, 
 
    {mounth:'October'}, 
 
    {mounth:'November'}, 
 
    {mounth:'December'}, 
 

 
]; 
 

 
$scope.SelectYear = function(data){ 
 
$scope.filterData = data.year; 
 
} 
 

 
\t 
 
}); 
 
</script> 
 
</html>

ワーキングデモ

出典

2017-06-24 14:59:44

Angular.jsの指定した列でテーブルをフィルタリングする

答えて

関連する問題