有什么方法可以使用<；选择>；按AngularJS排序行的步骤_Angularjs

有什么方法可以使用<；选择>；按AngularJS排序行的步骤

angularjs

有什么方法可以使用<；选择>；按AngularJS排序行的步骤,angularjs,Angularjs,我有从数据库返回并显示在屏幕上的行： <tr data-ng-repeat="row in grid.data"> 行中有“id”、“number”、“text”等列有人举过我如何创建一个下拉列表的例子吗？该下拉列表允许我选择这三列中的哪一列来对返回的行进行排序首先为订单方向定义范围变量，并通过特殊功能访问数据数组： <div ng-app ng-controller="Ctr"> <select ng-model="orderBy">

我有从数据库返回并显示在屏幕上的行：

<tr data-ng-repeat="row in grid.data">

行中有“id”、“number”、“text”等列

有人举过我如何创建一个下拉列表的例子吗？该下拉列表允许我选择这三列中的哪一列来对返回的行进行排序

首先为订单方向定义范围变量，并通过特殊功能访问数据数组：

<div ng-app ng-controller="Ctr">
    <select ng-model="orderBy">
        <option>Id</option>
        <option>Name</option>
    </select>

    <ul data-ng-repeat="row in orderData(orderBy)">
        <li>{{row.Id}}: {{row.Name}}</li>
    </ul>
</div>


身份证件
名称

{{row.Id}}:{{row.Name}

示例控制器如下所示：

function Ctr($scope) {

    // Get your data:
    // (think it can be hidden in context as local variable to not to expose in
    // outside because you'll access the data via special function)
    var data = [
        {Id: 1, Name: 'C'},
        {Id: 2, Name: 'B'},
        {Id: 3, Name: 'A'}
    ];

    // Set default ordering field
    $scope.orderBy = 'Id';

    // Ordering function accessed from UI
    $scope.orderData = function(orderBy) {
        return data.sort(function(a, b) {
            var valueA = a[orderBy];
            var valueB = b[orderBy];
            return (valueA < valueB) ? -1 : (valueA > valueB) ? 1 : 0;
        });
    };
}

功能中心（$scope）{
//获取您的数据：
//（认为它可以作为局部变量隐藏在上下文中，以避免在上下文中公开。）
//外部，因为您将通过特殊功能访问数据）
风险值数据=[
{Id:1，名称：'C'}，
{Id:2，名称：'B'}，
{Id:3，名称：'A'}
];
//设置默认排序字段
$scope.orderBy='Id'；
//从UI访问的排序函数
$scope.orderData=函数（orderBy）{
返回数据。排序（函数（a，b）{
var valueA=a[orderBy]；
var valueB=b[orderBy]；
返回值（valueAvalueB）？1:0；
});
};
}

并在控制器的函数中对数据进行排序

这其实很简单，试试：

html：

<body ng-controller="AppCtrl">
  Sort by: <select ng-model="sortField" ng-options="o.label for o in fields"></select>

  <label>
    <input type="checkbox" ng-model="inverse"> inverse
  </label>

  <hr>

  <table>
    <tr data-ng-repeat="row in grid.data|orderBy:sortField.key:inverse">
      <td>{{row.id}}</td>
      <td>{{row.number}}</td>
      <td>{{row.text}}</td>
    </tr>
  </table>
</body>

app.controller('AppCtrl', ['$scope', function($scope) {
  $scope.fields = [
    { label: 'ID',   key: 'id' },
    { label: 'Nr.',  key: 'number' },
    { label: 'Text', key: 'text' }
  ];

  $scope.sortField = $scope.fields[2];
  $scope.inverse = false;

  $scope.grid = {
    data: [
      { id: 1, number: 4, text: 'A' },
      { id: 2, number: 3, text: 'E' },
      { id: 3, number: 2, text: 'B' },
      { id: 4, number: 1, text: 'D' },
      { id: 5, number: 0, text: 'C' }
    ]
  };
}]);

演示：

但是如果我想在运行中更改顺序，这会起作用吗？@Alan，请看我粘贴的示例，当然会起作用，因为这是Angularjs的开发目的：）非常感谢。我喜欢你的解决方案。