当分隔符从 ng: 更改为 ng- 时，Angular-JS 表格排序不起作用

Question

我创建了一个 Angular 应用程序，用于根据 ascii 值对 html 表进行排序。该应用程序运行良好，但问题是当我将分隔符 从 'ng:' 更改为 'ng-' 时，排序不起作用。如果这是由于其他原因造成的，请原谅我......因为我是 Angular js 的新手

谁能告诉我一些解决方法

带有 'ng-' 分隔符的角码 (Working Demo) - 排序不工作

<div ng-controller="Main" ng-app="myApp">
<table border="1">
  <tr>
    <th><a href ng-click="sortBy('name')">Name</a></th>
    <th><a href ng-click="sortBy('phone')">Phone Number</a></th>
    <th><a href ng-click="sortBy('age')">Age</a></th>
    <th><a href ng-click="sortBy('date')">Date</a></th>
  </tr>
  <tr ng-repeat="friend in friends|orderBy:sort:reverse">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.age}}</td>
    <td>{{friend.date}}</td>
  </tr>
</table>
</div>

Answer 1

问题在于您如何定义和使用谓词和反向。

当您在此函数中使用“this”时，它们仅在此函数的范围内定义，并且无法在此函数之外访问。

$scope.sortBy = function (field) {
    if (this.predicate != field) {
        this.predicate = field;
        this.reverse = false;
    } else {
        this.reverse = !this.reverse;
    }
};

我将它更新为使用局部谓词变量和作用域上的反向属性，因此它可以在标记中使用。

var predicate;
$scope.reverse = false;

$scope.sortBy = function (field) {
    if (predicate != field) {
        predicate = field;
        $scope.reverse = false;
    } else {
        $scope.reverse = !$scope.reverse;
    }
};

更新小提琴：http://jsfiddle.net/rvdww/77/