Angularjs表的排序与NG-重复

我有一个HTML表，并希望通过单击表格标题（CTRL $scope.headers）到我的记录（$scope.records在CTRL）排序，Angularjs表的排序与NG-重复

谁能解释为什么这项工作：

<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>

并且不：

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

下面是记录代码：

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

我有我的表列58，从而将通过表格的标题会好得多循环......

来源

2012-10-05 alchemication

什么，确切地说，不适用于第二种解决方案？我估计你的 $ index被绑定到td重复，而不是tr重复，但是我没有足够的信息来确定。你有没有试过用batarang来看范围？ –

请看Gloopy-s的回复，我想我在重复范围内学到了一些关于原语的新东西;）thx – alchemication

正如David认为这是可能的范围有关。由于ngRepeat会创建一个新的范围，因此您的ngClick将为每个列标题将sortColumn和reverse设置在其自己的子范围中。解决此

的一种方式，以确保您正在修改在同一个范围值将在范围之内创建一个函数，调用你的ngClick传入指数：

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

这个作为你的标记：

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

Here is a fiddle举一个例子。

另一种选择是绑定到一个非基本类型是这样的（孩子作用域将访问同一个对象）：

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

以此为您的标记：

<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举一个例子。

来源

2012-10-05 15:21:37 Gloopy

非常感谢，它正在工作！非常感谢您的帮助，我发现第二个解决方案是...嗯...更好，因为我不需要在控制器中创建新的排序功能。再次感谢！！ – alchemication

扩展Gloopy的答案，另一种选择是修改父的属性在NG-重复的基本类型：

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

Here is a fiddle。

但请注意，$ parent不是scope的文档属性，所以这有些破解，所以请自担风险。

我希望AngularJS不得不处理由NG重复，NG-开关等创建，因为很多时候，我们需要修改的原语父作用域属性，这些“内部范围”的一种更好的方式。

另请参见Gloopy关于作用域继承的深刻见解，因为它涉及到基元和非基元here。

来源

2012-10-05 16:02:41

这实际上是个好主意;）谢谢 – alchemication

Angularjs表的排序与NG-重复

回答

相关问题