11

我正在尝试对从 JSON 源填充的数据表进行排序。我的代码如下：

HTML：

<div ng-app="myApp">
    <div ng-controller="PurchasesCtrl">
        <table cellspacing="0">
            <tr class="first">
                <th class="first" ng:click="changeSorting(purchases.date)">Date</th>
                <th ng:click="changeSorting(purchases.text)">Description</th>
                <th ng:click="changeSorting(purchases.price)">Amount</th>
                <th ng:click="changeSorting(purchases.availability)">Status</th>
            </tr>
            <tr ng-repeat="purchase in purchases.data">
                <td class="first">{{purchase.date}}</td>
                <td>{{purchase.text}}</td>
                <td>{{purchase.price}}</td>
                <td>{{purchase.availability}}</td>
            </tr>
        </table>
    </div>
</div>

JS：

var myApp = angular.module("myApp",[]);

myApp.factory("Purchases", function(){
    var Purchases = {};

    Purchases.data = [
        {
            date: "10/05/2012",
            text: "1 Lorem ipsum dolor sit amet ipsum dolor",
            price: "£123.45",
            availability: "1 Available until 10th Dec 2013"
        },
        {
            date: "24/05/2012",
            text: "2 Lorem ipsum dolor sit amet ipsum dolor",
            price: "£234.56",
            availability: "2 Available until 10th Dec 2013"
        },
        {
            date: "20/05/2012",
            text: "3 Lorem ipsum dolor sit amet ipsum dolor",
            price: "£345.67",
            availability: "3 Available until 10th Dec 2013"
        }
    ];
    return Purchases;
});

function PurchasesCtrl($scope, Purchases){
    $scope.purchases = Purchases;

    $scope.changeSorting = function(column) {
        var sort = $scope.sort;

        if (sort.column == column) {
            sort.descending = !sort.descending;
        } else {
            sort.column = column;
            sort.descending = false;
        }
    };
}

小提琴：http: //jsfiddle.net/7czsM/1/

如您所见，我尝试向表头添加一个单击函数来调用对数据进行排序的函数，但它不起作用。

我在这里看到了一个确实有效的例子：http: //jsfiddle.net/vojtajina/js64b/14/，但是当我尝试将同样的事情应用到我的场景时，它很快就崩溃了; 例如，我尝试通过添加以下内容以编程方式在 JSON 中添加表头：

var Purchases = {};

Purchases.head = [
        {
            date: "Date",
            text: "Text column",
            price: "Price column",
            availability: "Availability column"
        }

    Purchases.data = [
        {
            date: "10/05/2012",
            text: "1 Lorem ipsum dolor sit amet ipsum dolor",
            price: "£123.45",
            availability: "1 Available until 10th Dec 2013"
        },

这只会阻止任何工作，但我认为可以将多组数据添加到 Angular 变量中？

我是 Angular 的新手，所以我真的很坚持。任何指针将不胜感激，谢谢。

4

5 回答 5

27

更新了 jsfiddle：http: //jsfiddle.net/gweur/

sza 是对的，您确实忘记了 $scope.sort 对象，但是您也缺少 ng-repeat 中的 orderBy 过滤器

|orderBy:sort.column:sort.descending

此外，您需要将列名显式传递给 changeSorting() 函数，例如

ng-click="changeSorting('text')"

不确定是否有其他方法可以处理此问题。

最后，ng-click 是您使用的 AngularJS 版本的正确语法。

于 2013-09-13T15:53:34.070 回答
8

另一个使表格可排序的很好的例子

http://jsfiddle.net/vojtajina/js64b/14/

<th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">{{th}}</th>

scope.changeSorting = function(column) {
    var sort = scope.sort;
    if (sort.column == column) {
        sort.descending = !sort.descending;
    } else {
        sort.column = column;
        sort.descending = false;
    }
};
于 2013-11-19T08:54:06.527 回答
5

这是我的解决方案。我还将整个事情包装成一个指令。唯一的依赖是 UI.Bootstrap.pagination，它在分页方面做得很好。

这是plunker

这是github源代码。

于 2014-03-17T17:44:34.140 回答
0

或者您可以使用 #ngTasty 作为简单的表格指令。github：https ://github.com/Zizzamia/ng-tasty 文档：http: //zizzamia.com/ng-tasty/directive/table

于 2014-10-08T16:14:20.083 回答
0

我认为你的一些 AngularJS 样板代码，特别是设置你的控制器和工厂，可能有语法错误。

这是您的数据在表格列排序方法上工作和扩展的示例。由于 AngularJS 擅长处理 javascript 数据结构以在 HTML 中显示，因此您只需重新排列内存中的 javascript 数组，AngularJS 就会接受这些更改。此示例允许单击表的标题，这将触发基于该列数据类型的排序。如果它已经在该列上排序，它将对该列进行反向排序。类型检测是通过提供的 isNumeric() 函数完成的，并且进行了两个微小的调整：

  1. 添加了检查是否将“#”符号作为标题输入并在 toggleSort 方法中排序为数字。如果愿意，用户可以轻松地将其删除。
  2. 当 toggleSort 尝试按字母顺序排序时，如果它捕获到 TypeError，它会切换到对数字进行排序。

var myApp = angular.module("myApp", []);

myApp.factory("Purchases", function() {
  var Purchases = {};

  Purchases.data = [{
    date: "10/05/2012",
    text: "1 Lorem ipsum dolor sit amet ipsum dolor",
    price: "£123.45",
    availability: "1 Available until 10th Dec 2013"
  }, {
    date: "24/05/2012",
    text: "2 Lorem ipsum dolor sit amet ipsum dolor",
    price: "£234.56",
    availability: "2 Available until 10th Dec 2013"
  }, {
    date: "20/05/2012",
    text: "3 Lorem ipsum dolor sit amet ipsum dolor",
    price: "£345.67",
    availability: "3 Available until 10th Dec 2013"
  }];
  return Purchases;
});

myApp.controller("PurchasesCtrl", function($scope, Purchases) {
  $scope.purchases = Purchases.data;

  // Dynamically get the entry headers to use with displaying the nested data via header-key lookups
  // Assumes all lines contain same key-text data
  $scope.purchasesHeaderKeys = []; // Contains only the key-data, not the values
  for (var key in $scope.purchases[0]) {
    if ($scope.purchases[0].hasOwnProperty(key)) {
      $scope.purchasesHeaderKeys.push(key);
    }
  }


  /**
   * Determine if the input value is a number or not.
   * @param n The input value to be checked for numeric status.
   * @returns true if parameter is numeric, or false otherwise.
   * 
   * This method uses the following evaluations to determine if input is a numeric:
   * 
   * 		(5); // true  
   * 		('123'); // true  
   * 		('123abc'); // false  
   * 		('q345'); // false
   * 		(null); // false
   * 		(""); // false
   *		([]); // false
   * 		('   '); // false
   * 		(true); // false
   * 		(false); // false
   * 		(undefined); // false
   * 		(new String('')); // false
   * 
   * @author C.D. (modified by)
   * @original https://stackoverflow.com/a/1421988/10930451
   * 
   */
  function isNumeric(n) {
    if (!isNaN(parseFloat(n)) && !isNaN(n - 0) && n !== null && n !== "") {
      return true;
    }
    return false;
  }

  /**
   * Column Sort Method (generic). Sort based on target column header or reverse sort if already selected on that.
   * @param dataSource The array of JSON data to be sorted
   * @param headers The array of JSON object-keys (table column headers) to be referenced
   * @param index The target JSON object-key to sort the table columns based upon
   * 
   * @author C.D.
   */
  $scope.lastSortIndex = 0;
  $scope.changeSorting = function(dataSource, headers, index) {
    if ($scope.lastSortIndex === index) {
      dataSource.reverse();
    } else {
      var key = headers[index];
      if (key === "#" || isNumeric(dataSource[key])) { // Compare as numeric or on '#' sign
        dataSource.sort((a, b) => parseFloat(a[key]) - parseFloat(b[key]));
      } else // Compare as Strings
      {
        try { // Attempt to sort as Strings
          dataSource.sort((a, b) => a[key].localeCompare(b[key]));
        } catch (error) {
          if (error.name === 'TypeError') { // Catch type error, actually sort as Numeric
            dataSource.sort((a, b) => parseFloat(a[key]) - parseFloat(b[key]));
          }
        }
      }
      $scope.lastSortIndex = index;
      $scope.reverseSorted = false;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<html ng-app="myApp">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>AngularJS - Hello World</title>


  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="PurchasesCtrl">
  <div class="container">
    <table class="table table-hover	table-sm">
  		<thead>
  			<tr>
  				<th ng-repeat="header in purchasesHeaderKeys">
  					<a ng-click="changeSorting(purchases, purchasesHeaderKeys, $index)">{{ header }}</a>
  				</th>
  			</tr>
  		</thead>
  
  		<tbody>
  			<!-- Data is nested, so double-repeat to extract and display -->
  			<tr ng-repeat="row in purchases" >
  				<td ng-repeat="key in purchasesHeaderKeys">
  					{{row[key]}}
  				</td>
  			</tr>
  		</tbody>
  	</table>
  </div>
</body>

</html>

我已经整理了一个有效的Plunker 示例来演示。只需单击标题，它们就会在内存中对数组进行排序，AngularJS 将在其中获取更改并刷新 DOM 的该部分。

于 2019-10-04T18:38:52.507 回答