如何在AngularJs中应用带有数组的多个orderBy过滤器?

时间:2016-12-22 18:26:26

标签: angularjs

我必须使用orderBy过滤器过滤数组列表。在我的情况下,多个orderBy无效,只有一个orderBy才能正常工作。我该如何实现?

img1

//here  we create the product array and display the array in the HTML page.
var app=angular.module("App",[]);
app.controller("Cont",function($scope){

        var product = [
                          {:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
                          {pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
                          {pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
                          {pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"},
                          {pid:"103",ename:"Selena",esalary:"35000",ecity:"England"},
                          {pid:"102",ename:"Lokesh",esalary:"32500",ecity:"Malwa"},
                          {pid:"108",ename:"Gotm",esalary:"8910",ecity:"Ujain"},
                          {pid:"106",ename:"Soni",esalary:"16000",ecity:"bhopal"},
                         ]     
                        $scope.products=product; 
                   });
<html>
<head>
    <script src="angular.min.js"></script>
    <script src="controller.js"></script>
</head>
<body ng-app="App" ng-controller="Cont">    
        <form align="center">
        <table align="center" border="2">
            <thead>
                <tr>
                   <th>pid</th>
                    <th>ename</th>
                    <th>esalary</th>
                    <th>ecity</th>
                 </tr>   
            </thead>
            <tbody>
                <tr ng-repeat="x in products | orderBy:['pid','ename','esalary']">
                    <td>{{x.pid}}</td>
                    <td>{{x.ename | uppercase}}</td>
                    <td>{{x.esalary }}</td>
                    <td>{{x.ecity}}</td>
                </tr>
            </tbody>
        </table>
    </form>
    </body
    </html>

2 个答案:

答案 0 :(得分:0)

&#13;
&#13;
var app = angular.module("App", []);
app.controller("Cont", function($scope) {
  var product = [
  {
    'pid': "110",
    'ename': "Harry",
    'esalary': "25000",
    'ecity': "Agar"
  },
  {
    'pid': "109",
    'ename': "potter",
    'esalary': "11000",
    'ecity': "US"
  },
  {
    'pid': "101",
    'ename': "Peter",
    'esalary': "1200",
    'ecity': "London"
  },
  {
    'pid': "104",
    'ename': "Janifer",
    'esalary': "12000",
    'ecity': "Bejing"
  }]
  $scope.products = product;
  });
  
&#13;
<!DOCTYPE html>
<html>
<head>
   <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>

</head>
<body ng-app="App" ng-controller="Cont">
  <form align="center">
    <table align="center" border="2">
      <thead>
        <tr>
          <th>pid</th>
          <th>ename</th>
          <th>esalary</th>
          <th>ecity</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in products | orderBy:'pid' | orderBy:'ename'">
          <td>{{x.pid}}</td>
          <td>{{x.ename | uppercase}}</td>
          <td>{{x.esalary }}</td>
          <td>{{x.ecity}}</td>
        </tr>
      </tbody>
    </table>
  </form>
  </body>

</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

试试这个:

<tr ng-repeat="x in products | orderBy:['pid','ename']">
          <td>{{x.pid}}</td>
          <td>{{x.ename | uppercase}}</td>
          <td>{{x.esalary }}</td>
          <td>{{x.ecity}}</td>
        </tr>