排序不是有角度的 [英] Sorting is not working in angular

问题描述

我是Angular的新手。我正在尝试创建一个表并尝试应用如下排序



我的模块代码：



app.js：

（ function （）{
 myModule = angular.module（'  myAngularApplication'，[]）; 
}（） ）; 

LeadService.js：

 angular.module（'  myAngularApplication'）。service（  LeadService， function （$ http）{
  this  .getAllLeads =  function （）{ return  $ http.get（  / Student / GetLeads）;}; 
}）; 

StudentController.js：

 angular.module（' < span class =code-string> myAngularApplication'）。controller（'  StudentController' ， function （$ scope，LeadService）{
 
 $ scope.leads = []; 
 $ scope.sortType = '  StudentName';  //  设置默认排序类型 
 $ scope.sortReverse = 假;  //  设置默认排序顺序 
 $ scope.searchFish = ' '; 
 GetAllLeads（）; 
 
  function  GetAllLeads（）{
 $ scope.leads = LeadService.getAllLeads（）; 
 $ scope.leads = [
 {ID： 0 ，StudentName： 测试书1，来源： 测试作者1 ，课程：  TEST1}，
 {ID： 1 ，StudentName： 测试书2，来源： 测试作者2，课程：  TEST2}，
 {ID： 2 ，StudentName： 测试书332，来源： 测试作者3，课程：  TEST3}，
 {ID： 4  ，StudentName： 测试书4，来源：  测试作者4，课程：  TEST4}，
 {ID： 5 ，StudentName： 测试书5，来源： 测试作者5，课程：  TEST5} 
];< small>< small> ; < /   small  >  < span class =code-keyword>< /   small  >  
 
} 
 
}）; 

我的观点:(我正在使用MVC的.cshtml页面）

 @ * <   link     rel   = 样式表    href   =  http://maxcdn.bootstrapcdn.com /bootswatch/3.2.0/sandstone/bootstrap.min.css\">  
 < ;   link     rel  < span class =code-keyword> =  stylesheet    HREF   =  http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font -awesome.min.css >  
 <   script     src   =  http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js >  <   /   script  >  * @ 
 
 <   script     src   =  ../../ libs / angular.min.js  < /跨度> <温泉n class =code-attribute> type   =  text / javascript >  <   /   script  >  
 <   script     src   =  ../../ app / app.js    type   =  text / javascript >  <   /  脚本 >  
 <   script     src   =  ../../ app / Student / LeadService.js   类型  =  text / javascript >  <   /   script  >  
 <   script     src   =  ../../ app / Student / StudentController.js    type   =  text / javascript >  <   /   script  >  
 <   link     rel   =  stylesheet    href   =  ../../ plugins / datatables / dataTables.bootstrap.css >  
 <   div     ng-app   =  myAngularApplication    ng-contro ller   =  StudentController >  
 
 <   section     class   =  content >  
 
 <   div     class   = 框 >  <   pre     lang   =  text >  <   pre     lang   =  text >  
 <   div     class   =  box-body  >  
 <  表    id   =  example1    class   =  table table-bordered table-stri ped    ng-init   =  GetAllLeads（） >  
 <   thead  >  
 <   tr  >  
 <   th  >  ID <   / th  >  
 <   th  > 学生姓名<   / th  >  
 <   th  > 来源<   / th  >  
 <   th  > 课程<   / th  >  
 <   / tr  >  
 <   / thead  >  
 <  < span class =code-leadattribute> tbody  >  
 <   tr       ng-repeat   = 潜在客户 >  
 <   td  >  { {lead.ID}} <   / td  >  
 <   td  > ;  {{lead.StudentName}} <   / td  >  
 <   td  >  {{lead.Source}} < span class =code-keyword><   / td  >  
 <   td  >  {{ lead.Course}} <   / td  >  
 <   / tr  > ;  
 <   / tbody  >  
 <   / table  >  
 <   / div  >  
 <   / div  >  
 <   / div  >  <   / section  >  
 
 <   script    类型  =  text / javascript >  
 $（ function （）{
 $（ ＃example1）。DataTable（）; 
 $（' ＃example2'）。DataTable（{
   paging： true ，
 < span class =code-string>  lengthChange： false ，
  搜索： false ，
   ordered： true  ，
   info： true ，
   autoWidth： false  
}）; 
}）; 
 <   /   script  >  

这段代码很好（所有排序和过滤但是当我从控制器获取数据然后排序和过滤器不起作用。



我在控制器中的行为是

  public  JsonResult GetLeads（）
 {
 List< lead> leadList = 新列表< lead>（）; 
 
  for （ int  i =  0 ; i <   3 ; i ++）
 {
 Lead obj1 =  new  Lead（）; 
 obj1.ID = i; 
 obj1.StudentName =   Vijay; 
 obj1.Source =   Source + i; 
 obj1.Course =   cource + i; 
 leadList.Add（obj1）; 
} 
 
 
  return  Json（leadList.ToArray（），JsonRequestBehavior.AllowGet）; 
} 

我改变了我的控制器如下

 angular.module（'  myAngularApplication'）。controller（'  StudentController'， function （$ scope，LeadService ）{
 
 $ scope.leads = []; 
 $ scope.sortType = '  StudentName';  //  设置默认排序类型 
 $ scope .sortReverse =  false ;  //  设置默认排序顺序 
 $ scope.searchFish = ' '; 
 GetAllLeads（ ）; 
 
  function  GetAllLeads（ ）{
  var  getData = LeadService.getAllLeads（）; 
 getData.then（ function （l）{
  //   $ scope.leads = l.data; //我也试过这个 
  for （i =  0 ; i< l.data.length; i ++）{
 $ scope.leads [i] = {ID：l.data [i] .ID， StudentName：l.data [i] .StudentName，来源：l.data [i] .Source，课程：l.data [i] .Course} 
} 
}， function （）{
 alert（' 获取记录时出错）; 
}）; 
 
} 
 
}）; 

最初按预期加载数据< br $>


对于排序和过滤我正在使用

 <   script     src   =  ../../ plugins / datatables / jquery.dataTables.min.js >  <   /   script  >  
 <   script     src   =   ../../ plugins / datatables / dataTables.bootstrap.min.js >  <   /   script  >  
 

我的问题是这个。为什么这会处理虚拟数据以及为什么它不能处理实际数据（从Controller返回）。我需要改变什么来使这项工作。这可能是个愚蠢的问题，但任何帮助都会受到赞赏。



我尝试过的事情：



我试图更改Angular Js版本。

解决方案

http）{
这 .getAllLeads = function （）{ return

< blockquote> http.get（ / Student / GetLeads）; };
}）;

StudentController.js：

 angular.module（'  myAngularApplication'）。controller（'  StudentController'， function （
 
 
范围，LeadService）{
 
 
I am new to Angular. I am trying to create a table and try to apply sorting as below



My Module Code :



app.js :



(function () {
    myModule = angular.module('myAngularApplication', []);
}());




LeadService.js :



angular.module('myAngularApplication').service("LeadService", function ($http) {
    this.getAllLeads = function () { return $http.get("/Student/GetLeads"); };
});




StudentController.js :



angular.module('myAngularApplication').controller('StudentController', function ($scope, LeadService) {

    $scope.leads = [];
    $scope.sortType = 'StudentName'; // set the default sort type
    $scope.sortReverse = false;  // set the default sort order
    $scope.searchFish = '';
    GetAllLeads();

    function GetAllLeads() {
          $scope.leads = LeadService.getAllLeads();
                $scope.leads = [
                        { ID: 0, StudentName: "Test Books 1", Source: "Test Author 1", Course: "TEST1" },
                        { ID: 1, StudentName: "Test Books 2", Source: "Test Author 2", Course: "TEST2" },
                        { ID: 2, StudentName: "Test Books 332", Source: "Test Author 3", Course: "TEST3" },
                        { ID: 4, StudentName: "Test Books 4", Source: "Test Author 4", Course: "TEST4" },
                        { ID: 5, StudentName: "Test Books 5", Source: "Test Author 5", Course: "TEST5" }
                    ];<small><small></small></small>

    }

});


My View : (Its an .cshtml page as i am using MVC)



@*<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>*@

<script src="../../libs/angular.min.js" type="text/javascript"></script>
<script src="../../app/app.js" type="text/javascript"></script>
<script src="../../app/Student/LeadService.js" type="text/javascript"></script>
<script src="../../app/Student/StudentController.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
<div ng-app="myAngularApplication" ng-controller="StudentController">

<section class="content">
      
          <div class="box"><pre lang="text"><pre lang="text">
                <div class="box-body">
                  <table id="example1" class="table table-bordered table-striped" ng-init="GetAllLeads()">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Student Name</th>
                        <th>Source</th>
                        <th>Course</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr  ng-repeat="lead in leads">
                        <td>{{lead.ID}}</td>
                        <td>{{lead.StudentName}}</td>
                        <td>{{lead.Source}}</td>
                        <td>{{lead.Course}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
</div></section>

 <script type="text/javascript">
     $(function () {
         $("#example1").DataTable();
         $('#example2').DataTable({
             "paging": true,
             "lengthChange": false,
             "searching": false,
             "ordering": true,
             "info": true,
             "autoWidth": false
         });
     });
    </script>




This code woks fine (all sorting and filter but when i fetch data from a controller then sorting and Filter does not work.



My Action in Controller is 



public JsonResult GetLeads()
        {
            List<lead> leadList = new List<lead>();

            for (int i = 0; i < 3; i++)
            {
                Lead obj1 = new Lead();
                obj1.ID = i;
                obj1.StudentName = "Vijay";
                obj1.Source = "Source" + i;
                obj1.Course = "cource" + i;
                leadList.Add(obj1);
            }
          

            return Json(leadList.ToArray(), JsonRequestBehavior.AllowGet);
        }




and i changed my controller as below



angular.module('myAngularApplication').controller('StudentController', function ($scope, LeadService) {

    $scope.leads = [];
    $scope.sortType = 'StudentName'; // set the default sort type
    $scope.sortReverse = false;  // set the default sort order
    $scope.searchFish = '';
    GetAllLeads();

    function GetAllLeads() {
        var getData = LeadService.getAllLeads();
        getData.then(function (l) {
           // $scope.leads = l.data; // I tried this also
            for (i = 0; i < l.data.length; i++) {
                $scope.leads[i] = { ID: l.data[i].ID, StudentName: l.data[i].StudentName, Source: l.data[i].Source, Course: l.data[i].Course }
            }
        }, function () {
            alert('Error in getting records');
        });

    }

});




Initially it loads data as expected



For Sorting and Filter i am using

<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>




My Question is this. Why this is working with dummy data and why its not working with actual data (returning from Controller). What i need to change to make this work. This can be a silly question but any help will be appreciate.



What I have tried:



I tried to change the Angular Js version.
解决方案
http) {
    this.getAllLeads = function () { return

http.get("/Student/GetLeads"); };
});

StudentController.js :

angular.module('myAngularApplication').controller('StudentController', function (

scope, LeadService) {


                        
这篇关于排序不是有角度的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！