在ngTable AngularJS中过滤 [英] Filtering in ngTable AngularJS

问题描述

大家好，我尝试用ngTable模板创建一个表。但我在过滤数据方面遇到了麻烦。我有三个过滤器 - 每列一个过滤器，当我用第一个过滤器过滤数据时一切正常，但是当我用第二个或第三个过滤器过滤数据然后清除它们时，表中的数据量会减少。

我的浏览文件：

 <   script     src   = 〜/ Scripts / angular.min.js >  <   /   script  >  
 <   script    < span class =code-attribute> src   = 〜/ Scripts / ng-table.js   >  <   /   script  >  
 
 <   script     src   = 〜/ Scripts / app / app.js >  <   /   script  >  
 <   script     src   = 〜/ Scripts / app / Constants.js >  <   /   script  >  
 <   script     src   = 〜/ Scripts / app / controllers / users-controller.js > ;  <   /   script  >  
 
 <   link     rel   = 样式表    type   =  text / css    href   = 〜/ Content / css / ng -table.css  /  >  
 <   link     rel   = 样式表   类型  =  text / css < span class =code-attribute>   href   = 〜/ Content / css / users.css  /  >  
 
 
 
 
 
 @ Html.HiddenFor（u => User.Identity.Name）
 <   div     ng-app   =   bizPlatformModule    ng-controller   =  UsersController >  
 
 
 <   img     src   = 〜/ Content / images / ajax_loader / ajax-loader.gif    ng-hide   =  loadCompleted  /  >  
 <   p     ng-show   =  isError == true >  {{errorMessage}} <   / p  >  
 
 <   div     class   =  row    id   =  table-wrapper    ng-hide   = '  isError == true || loadCompleted == false' >  
 <   table     ng-table   =  tableParams    show-filter   =  true    class   =  table >  
 <   tr     ng-repeat   = 用户中的用户 >  
 <   td     data-title   = '@ CRMStrings.Name' < span class =code-attribute> sortable   = '名称' >  
 <   p  < span class =code-attribute>   class   =  table-cell >  {{user.Name}} <   / p  >  
 <   / td  >  
 <   td     data-title   = '@ CRMStrings.Email' < span class =code-attribute>   sortable   = '电子邮件'   过滤器  =  {'电子邮件'：'text'} >  
 <   p     class   =  table-cell >  {{user.Email}} <   / p  >  
 <   / td  >  
 <  < span class =code-leadattribute> td     data-title   = '@ CRMStrings.Telephone'    sortable   = '电话'   过滤器  =  {'电话'：'文字'} >  
 <   p     class   =  table-cell < span class =code-keyword>>  {{user.Telephone}} <   / p  >  
 <   / td  >  
 <   td  >  
 <  按钮    type   = 按钮    class   =  btn btn-green >  @ CRMStrings.Details <   / button  >  
 <   / td  >  
 <   / tr  >  
 <   / table  >  
 <   / div  >  
 
 <   / div  >  

和我的控制器文件：

 bizPlatfromApp.controller（'  UsersController'，['  RequestURL '，'  $ scope'，'   $ http'，'  $ filter' ，'  ngTableParams'， function （RequestURL，$ scope，$ http，$ filter，ngTableParams）{
  //   url patter for api请求 
 
 $ scope.loadCompleted =  false ; 
 
  //  具体场地所有者的电子邮件地址 
  var  mail =  document  .getElementById（  User_Identity_Name）值。 
  //  连接请求网址 
  var  request = RequestURL.url.concat（mail）; 
  //   var Ousers = [];  
  var  _getData =  function （data）{
 $ scope.isError =  false ; 
 
 $ scope.tableParams =  new  ngTableParams（
 {
 page： 1 ， //  显示第一页 
 count： 10 ， //  每页计数 
排序：{
 name：'  asc'  / /  初始排序 
} 
 
 
}，{
总计：data.length ，
 
 getData： function （$ defer，params）{
 
  var  filteredD ata = params.filter（）？$ filter（'  filter'）（data，{Name：< span class =code-string> ，Email：params.filter（）。Email}）：data; 
 
  var  orderedData = params.sorting（）？ $ filter（'  orderBy'）（filteredData，params.orderBy（））：data; 
 
  console  .log（ 名称： + params.filter（）。名称+  电子邮件： + params.filter（）。电子邮件+  电话： + params.filter（）。电话）; 
 
  //  使用内置角度过滤器 
 
 params.total（orderedData.length）; 
  var  page = orderedData.slice（（params.page（） -   1 ）* params .count（），params.page（）* params.count（））; 
  console  .log（ 用户：  + data.length +  已过滤： + filteredData.length +   Ordered： + orderedData.length +   count： + params.count（）+   total： + params.total（））; 
 $ scope.users = page; 
  console  .log（data.length）; 
 $ defer.resolve（page）; 
} 
}）; 
} 
  //  提出请求 
 $ http.get （请求）
 .success（ function （data）{
  //  < span class =code-comment> Ousers = data;  
 _getData（data）; 
 $ scope.loadCompleted =  true  ; 
}）
 .error（ function （status）{
 $ scope.errorMessage =  发生了一些麻烦。我们很快就会修复它。; 
 $ scope.isError =  true ; 
}）; 
 
 
}]）

非常感谢任何答案。

解决方案

scope'，'

http'，'

filter'，' ngTableParams'， function （RequestURL，

Hi all, i try to make a table with ngTable template. But I have trouble with filtering data. I have three filters - one for each column, and when I filter data with first filter all works fine, but when i filter data with second or third filter and then clear them the amount of data in table decreases.
My view file:

<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/ng-table.js"></script>

<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/Constants.js"></script>
<script src="~/Scripts/app/controllers/users-controller.js"></script>

<link rel="stylesheet" type="text/css" href="~/Content/css/ng-table.css"/>
<link rel="stylesheet" type="text/css" href="~/Content/css/users.css"/>





@Html.HiddenFor(u=>User.Identity.Name)
<div ng-app="bizPlatformModule" ng-controller="UsersController">

    
    <img src="~/Content/images/ajax_loader/ajax-loader.gif" ng-hide="loadCompleted"/>
    <p ng-show="isError==true">{{errorMessage}}</p>

    <div class="row" id="table-wrapper" ng-hide='isError==true || loadCompleted==false'>
        <table ng-table="tableParams" show-filter="true" class="table">
            <tr ng-repeat="user in users">
                <td data-title="'@CRMStrings.Name' "sortable="'Name'">
                    <p class="table-cell"> {{user.Name}}</p>
                </td>
                <td data-title="'@CRMStrings.Email'" sortable="'Email'" filter="{' Email': 'text' }">
                    <p class="table-cell"> {{user.Email}}</p>
                </td>
                <td data-title="'@CRMStrings.Telephone'" sortable="'Telephone'" filter="{ 'Telephone': 'text' }">
                    <p class="table-cell">{{user.Telephone}}</p>
                </td>
                <td>
                    <button type="button" class="btn btn-green">@CRMStrings.Details</button>
                </td>
            </tr>
        </table>
    </div>

</div>

And my controller file:

bizPlatfromApp.controller('UsersController', ['RequestURL','$scope', '$http', '$filter', 'ngTableParams', function (RequestURL,$scope, $http, $filter, ngTableParams) {
    //url patter for api request

    $scope.loadCompleted = false;
    
    //email adress of concrete venue owner
    var mail = document.getElementById("User_Identity_Name").value;
    //concatenated request url
    var request = RequestURL.url.concat(mail);
    //var Ousers = [];
    var _getData = function(data) {
            $scope.isError = false;
           
            $scope.tableParams = new ngTableParams(
            {
                page: 1,            // show first page
                count: 10,          // count per page
                sorting: {
                    name: 'asc'     // initial sorting
                }
              
                    
            }, {
                total: data.length,

                getData: function ($defer, params) {
                    
                    var filteredData = params.filter() ?$filter('filter')(data, {Name:"", Email:params.filter().Email})  : data;
                    
                    var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) :data;

                    console.log("Name: " + params.filter().Name + " Email:" + params.filter().Email + "Telephone:" + params.filter().Telephone);
                    
                    // use build-in angular filter
                    
                    params.total(orderedData.length);
                   var  page = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    console.log("Users: " + data.length + "Filtered: " + filteredData.length + "Ordered: "+orderedData.length+"count:"+params.count()+"total: "+ params.total());
                    $scope.users = page;
                    console.log(data.length);
                    $defer.resolve(page);
                }
            });
    }
        //make a request 
    $http.get(request)
        .success(function (data) {
            //Ousers = data;
            _getData(data);
            $scope.loadCompleted = true;
        })
            .error(function(status) {
                $scope.errorMessage = "Some trouble happened.We try to fix it shortly.";
                $scope.isError = true;
            });


}])

Thanks a lot for any answers.

解决方案

scope', '

http', '

filter', 'ngTableParams', function (RequestURL,

这篇关于在ngTable AngularJS中过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！