javascript - 使用 ng-click 获取图标表中的位置

Question

我有一个使用 ng-repeat 生成的表格，其中包含一些列标题。在列标题上，我想要对列进行排序。我在其文本旁边添加了一个 font-awesome 排序图标，当单击该图标时，我会使用 ng-click="sortColumn()"调用 ng-click 。我为每个列标题调用此方法。

我如何知道哪个列标题被点击？现在它会针对每个标题列触发。

如何使用ng-click传递当前列？

我尝试传入 this，但它返回 $scope 对象。

这是我到目前为止所拥有的:

HTML:

<table class="table">
    <thead>
        <tr>
            <td><b>Product </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
            <td><b>Code </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
            <td><B>Available </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
            <td><B>Price </b><i class="fa fa-sort" ng-click="vm.sortColumn(this)"></i></td>
        </tr>
    </thead>
    <tbody>
        {{ vm.noProducts }}
        <tr ng-repeat="product in vm.products">
            <td>{{ product.productName}}</td>
            <td>{{ product.productCode }}</td>
            <td>{{ product.releaseDate | date }}</td>
            <td>{{ product.price | currency }}</td>
        </tr>
    </tbody>
</table>

Javascript:

vm.sortColumn = function (obj) {
    console.log(obj);
}

Answer 1

我认为您不能将列作为对象传递给 sortColumn()。如果您需要该函数中的列，您可以循环遍历产品并创建一个新数组，例如用所有产品名称填充该数组。 也许这个函数看起来像这样:

function getColumn(val){ // 'productName'
      var column = [];
      for(var i in $scope.products){
        column.push(column.push($scope.products[i][val]))
      }
      return column
 }

如果你想对表格进行排序，你可以使用 orderBy筛选。 向您的 sortColumn() 函数传递参数名称，并在您的 ng-repeat 中使用 orderBy 按参数之一对列升序/降序排序。

<table class="table">
    <thead>
        <tr>
            <td ng-click="sortColumn('productName')"><b>Product </b></td>
            <td ng-click="sortColumn('productCode')"><b >Code </b></td>
            <td ng-click="sortColumn('releaseDate')"><b >Available </b></td>
            <td ng-click="sortColumn('price')"><b >Price </b></td>
        </tr>
    </thead>
    <tbody>

        <tr ng-repeat="product in products | orderBy: criteria">
            <td>{{ product.productName}}</td>
            <td>{{ product.productCode }}</td>
            <td>{{ product.releaseDate | date }}</td>
            <td>{{ product.price | currency }}</td>
        </tr>
    </tbody>
</table>

在 Controller 中设置 orderBy 标准的默认值。 (我这里使用的是productName)

    $scope.criteria = 'productName';

    $scope.sortColumn = function(val){
      console.log(val)
      if($scope.criteria == val){
        $scope.criteria = "-"+val;
      } else {
        $scope.criteria = val;
      }

例如，如果用户单击productCode，所有行将按该条件升序排序('productCode')，如果用户再次单击productCode，所有行将按条件'-productCode'降序排序

我创建了小plunker来证明这一点。希望对您有所帮助。