0

我尝试仅使用 angularjs 来改进表格视图。（没有添加/删除类）

这是示例： Plunker。

我希望我的表是动态的，这意味着我不知道它有多少列，因此我使用ng-repeat.

在该示例中，我添加了：

$scope.headers = ['ProgramCode','ProgramGroup','EventCode','StartDate','FormalDate','LocCity','LocState','LocAddress', 'LocName','Price', 'LicenseeURL','GateKeeper_length','GateKeeperHTML','SeatsAreAvailable','LocLatitude','LocLongitude','EventType',"LocationUnivURL","UnivCourseNumber","UnivCourseType","UnivFaculty","Course_Type","cls"];

开始时，$scope.reverse = false;我写了$scope.reverse = undefined;

现在我可以这样写标题：

    <th ng-repeat="header in headers">{{ header }}
           <a ng-click="sort_by(header)">
             <i ng-class="{
                   'icon-sort':reverse == undefined,
                   'icon-chevron-up': reverse,
                   'icon-chevron-down': !reverse
                    }">
             </i>                                
            </a>
   </th>

我改变sort_by了看起来像这样的方法：

 $scope.sort_by = function(newSortingOrder) {   
  $scope.reverse = !$scope.reverse;   
 };

但是，当我按下向下/向上按钮激活排序器时，它会更新所有列中的所有图标，如下例所示：updated_Plunker

好吧，我对所有列只有一个标志reverse。我需要创建标志列表还是angularjs有其他技术？

4

1 回答 1

2

那是因为它们都引用了相同的reverse内容，因为您将其设置在ctrlRead范围内：

app.controller('ctrlRead', ['$scope', '$filter', 'Items', function($scope, $filter, Items) {

  ... 

  $scope.sort_by = function(newSortingOrder) {  
    $scope.reverse = !$scope.reverse;  
  };

  ... 

}]);

您需要为每个标题提供自己的位置来存储反向信息。至少有两种方法可以做到这一点。您可以将其存储在标头对象本身上：

  $scope.sort_by = function(header) {  
    header.reverse = !header.reverse;  
  };

在 HTML 中进行相应的更改：

    <th ng-repeat="header in headers">{{ header }}
      <a ng-click="sort_by(header)">
        <i ng-class="{
            'icon-sort':header.reverse == undefined, 
            'icon-chevron-up': header.reverse, 
            'icon-chevron-down': !header.reverse 
        }"></i>                                     
      </a>
    </th>

您还需要将标题从简单字符串更改为对象，以便它们可以保存额外信息。我只是通过将字符串数组映射到对象来快速而肮脏地做到这一点：

$scope.headers = ['ProgramCode','ProgramGroup','EventCode','StartDate','FormalDate','LocCity','LocState','LocAddress', 'LocName','Price', 'LicenseeURL','GateKeeper_length','GateKeeperHTML','SeatsAreAvailable','LocLatitude','LocLongitude','EventType',"LocationUnivURL","UnivCourseNumber","UnivCourseType","UnivFaculty","Course_Type","cls"];
$scope.headers =$scope.headers.map(function(h){return {title:h};});

我已经在这里叉了plunker。

第二种选择是在其中引入一个新的控制器ng-repeat并将排序的东西移到其中。然后每个标头都有自己的控制器和范围，因此也有自己的$scope.reverse. 请注意，ng-repeat已经为每个标头引入了一个新范围，但它对您没有帮助，因为您的排序功能是在所有这些标头共享的外部范围上定义的。

我现在推荐第一种方法，因为它使排序信息在单个标题范围之外很容易获得。使用第二种方法，排序信息只能在单个标题范围内使用，因此您需要做额外的工作才能从表的其余部分访问它。

于 2013-05-23T08:14:00.190 回答