Question

我有一个指定字段过滤表的问题。这是一张桌子图片： enter image description here

这是表的代码：

<div class="panel panel-default">
            <div class="panel-heading">

            <div class="btn-group" role="group">
  				<button type="button" class="btn btn-default" ng-repeat="years in history.yearbtn" ng-click="history.SelectYear($index=years.year)">{{years.year}}</button>
  				
			</div>
            
 		</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" >
  				<button type="button" class="btn btn-default" ng-click= history.SelectMounth($index=mounth.mounth) ng-repeat="mounth in history.mounthbtn">{{mounth.mounth}}</button>
  				
</div>
            </div>
        </div>

这是控制器的代码：

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'},

];

我只需要按“年”列过滤表格。我怎么能用Angular滤镜做到这一点？

Answer 1

试试这个

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

并像这样过滤：

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

Answer 2

我在角度2（打字稿）中做了同样的事情为每个td输入输入框并写入如

的键盘功能

(keyup)="sortBy(header)

实现你的sorBy功能，如

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

      }

Answer 3

＆＃13;

<!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">
  				<button type="button" class="btn btn-default" ng-repeat="years in yearbtn" ng-click="SelectYear(years)">{{years.year}}</button>
			</div>
            
 		</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" >
  				<button type="button" class="btn btn-default" ng-click='SelectMounth(mounth)' ng-repeat="mounth in mounthbtn">{{mounth.mounth}}</button>
  				
</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;
}

	
});
</script>
</html>

＆＃13;

工作演示

按Angular.js中的指定列过滤表

3 个答案: