Question

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

以下是示例：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还有其他技术吗？

Answer 1

这是因为他们都在引用相同的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};});

I've forked the plunker here

第二个选项是在ng-repeat中引入一个新控制器并将排序内容移动到该控制器中。然后每个标题将拥有自己的控制器和范围，因此也有自己的$scope.reverse。请注意ng-repeat已经为每个标头引入了一个新的范围，但它对您没有帮助，因为您的排序函数是在所有人共享的外部范围内定义的。

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

如何更新angularjs中表中的一个列图标？

1 个答案: