Angularjs bảng phân loại với ng-repeat

Question

Tôi có một bảng HTML và muốn sắp xếp hồ sơ của tôi ($scope.records trong ctrl) bằng cách nhấp vào tiêu đề bảng ($scope.headers trong ctrl),

bất cứ ai có thể giải thích lý do tại sao mà làm việc:

<th> 
    <a ng-click="sortColumn=headers[0];reverse=!reverse">{{ headers[0] }}</a> 
</th> 
<th> 
    <a ng-click="sortColumn=headers[1];reverse=!reverse">{{ headers[1] }}</a> 
</th> 

Và đó không:

<th ng-repeat="header in headers"> 
    <a ng-click="sortColumn=headers[$index];reverse=!reverse">{{ headers[$index] }}</a> 
</th> 

đây là mã cho hồ sơ:

<tr ng-repeat="arr in records | orderBy:sortColumn:reverse"> 
    <td ng-repeat="val in arr" ng-bind-html-unsafe="arr[headers[$index]]</td> 
</tr> 

Tôi có 58 cột trong bảng của tôi vì vậy sẽ tốt hơn nhiều để lặp qua các tiêu đề bảng ...

Answer 1

Như David đề nghị này có khả năng phạm vi liên quan. Kể từ khi ngRepeat tạo phạm vi mới, ngClick của bạn là đặt sortColumn và reverse trong phạm vi con của riêng nó cho mỗi tiêu đề cột.

Một cách để khắc này để đảm bảo bạn đang sửa đổi các giá trị trong phạm vi tương tự sẽ được tạo một hàm trên phạm vi và gọi đó là trong ngClick bạn đi qua trong chỉ mục:

$scope.toggleSort = function(index) { 
    if($scope.sortColumn === $scope.headers[index]){ 
     $scope.reverse = !$scope.reverse; 
    }      
    $scope.sortColumn = $scope.headers[index]; 
} 

với điều này như của bạn đánh dấu:

<th ng-repeat="header in headers"> 
    <a ng-click="toggleSort($index)">{{ headers[$index] }}</a> 
</th> 

Here is a fiddle với ví dụ.

---

Một lựa chọn khác sẽ được liên kết với một loại phi nguyên thủy như thế này (phạm vi đứa trẻ sẽ được truy cập vào cùng một đối tượng):

$scope.columnSort = { sortColumn: 'col1', reverse: false }; 

với điều này như đánh dấu của bạn:

<th ng-repeat="header in headers"> 
    <a ng-click="columnSort.sortColumn=headers[$index];columnSort.reverse=!columnSort.reverse">{{ headers[$index] }}</a> 
</th> 

Here is a fiddle với ví dụ.

Answer 2

Mở rộng câu trả lời huyền ảo của, tuy nhiên tùy chọn khác là để thay đổi thuộc tính của cha mẹ trong ng-repeat cho các loại nguyên thủy:

<a ng-click="$parent.sortColumn=headers[$index];$parent.reverse=!$parent.reverse">{{ headers[$index] }} 

Here is a fiddle.

Tuy nhiên, lưu ý rằng $ parent không phải là tài sản được ghi nhận là scope, vì vậy đây là một phần hack, vì vậy hãy tự chịu rủi ro.

Tôi muốn AngularJS có cách xử lý tốt hơn với các "phạm vi bên trong" được tạo bởi ng-repeat, ng-switch, v.v. bởi vì chúng ta thường phải sửa đổi các thuộc tính phạm vi cha nguyên thủy.

Xem thêm Nhận xét sâu sắc của Gloopy về thừa kế phạm vi vì nó liên quan đến nguyên thủy và không nguyên thủy here.