Question

我有网格显示在html和网格上方我有下拉列表。我必须根据下拉列表选择项动态地对网格视图的数据进行排序。在网格中，一个字段是不可见的。

这是我的工作人员：

http://plnkr.co/edit/1iJ7HVcv4CyMzNKUXHTi?p=preview

的index.html

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">

    <br><br>
    <span  class=""><br/>
                    <select ng-model="name" ng-options="name.name for name in names">
                      <option value="">---- SELECT ----</option>
                    </select>
                 </span><br/>
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

main.js

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {

  $scope.names = [
                               {name:' NAME A – Z ', shade:'dark'},
                               {name:' NAME Z – A ', shade:'light'},
                               {name:' ID LOW TO HIGH', shade:'dark'},
                               {name:' ID HIGH TO LOW', shade:'dark'}


                            ];





    $scope.myData = [{name: "Moroni", age: 50,id:1},
                     {name: "Tiancum", age: 43,id:2},
                     {name: "Jacob", age: 27,id:3},
                     {name: "Nephi", age: 29,id:4},
                     {name: "Enos", age: 34,id:5}];




    $scope.gridOptions = { data: 'myData' ,
                   columnDefs: [
            {field: 'name', displayName: 'Name'},
            {field:'age', displayName:'Age'},
            {field:'id', displayName:'Id', visible:false}
        ] 
    };
});

Answer 1

你可以这样做：

在您的选择中添加ng-change：

<select ng-change="sort()" ng-model="name" ng-options="name.name for name in names">

向您的模型添加一些有关所选选项含义的信息：

 $scope.names = [
                           {name:' NAME A – Z ', shade:'dark', col: 'name', dir: 'asc'},
                           {name:' NAME Z – A ', shade:'light', col: 'name', dir: 'desc'},
                           {name:' ID LOW TO HIGH', shade:'dark', col: 'id', dir: 'asc'},
                           {name:' ID HIGH TO LOW', shade:'dark', col: 'id', dir: 'desc'}


                        ];

告诉ng-grid它应该做什么：

    $scope.sort = function(){
  $scope.gridOptions.sortInfo = {fields:[$scope.name.col],directions:[$scope.name.dir]};
  $scope.gridOptions.sortBy($scope.name.col);

}

更新了plunker：

http://plnkr.co/edit/yP4nK6wgmD3picuz3ZIf?p=preview

如何根据角度js中的下拉选择对网格数据进行排序

1 个答案: