为什么表头单击事件不起作用?

时间:2015-10-28 02:59:36

标签: angularjs angularjs-directive angularjs-scope ionic-framework angularjs-ng-repeat

我正在尝试使用列标题的click事件对列进行排序。我正在使用使用过滤器 orderBy 的角度js框架。我看到了一个正常工作的示例,它是对点击列的排序列标题

http://plnkr.co/edit/aGAI6EmCwGyPKmFZAFb8?p=preview

我使用上面的示例做了一个简单的演示尝试在标题点击上对我的列进行排序 当我点击标题时它会给我警告索引,反向参数和图像也会改变,但列没有排序 我们可以使用标题点击对列进行排序,如上例所示 这是我的代码

http://plnkr.co/edit/r22YnCILVSuWPrMnTnv2?p=preview

请点击任何列标题并查看警报,但列未排序原因? 请增加plunker的输出窗口屏幕以查看输出。

<header-row ng-transclude class="row rowclassheaderClass" style="padding-bottom:1%">
    <div class="col brd text-center brdleft_right gray-20 collapse-sm columnCss"
         ng-repeat="d in invoice_column_name | filter:{checked: true}">
        <sort-header label="{{d.label|uppercase}}" index="{{d.index}}"
                     sort-exp="setSort(idx, reverse)"></sort-header>
    </div>
    <div class="col col-10 text-center brd gray-20" ng-click="openSettingPopover($event)">
        <button class="button-icon icon ion-ios-more fntandbg"></button>
    </div>
</header-row>

任何更新..?

1 个答案:

答案 0 :(得分:0)

看起来你正试图重新发明轮子。有一个sortBy直接建立角度。

看一看 docs.angularjs.org/api/ng/filter/orderBy

特别是基本概述的第一个示例,然后是第二个示例(我已在下面的代码示例中概述),它完全符合您的要求,但代码要少得多。

  

View Plunkr

<body ng-app="orderByExample">
  <div ng-controller="ExampleController">
  <table class="friend">
    <tr>
      <th><a href="" ng-click="reverse=false;order('name', false)">Name</a>
        (<a href="" ng-click="order('-name',false)">^</a>)</th>
      <th><a href="" ng-click="reverse=!reverse;order('phone', reverse)">Phone Number</a></th>
      <th><a href="" ng-click="reverse=!reverse;order('age',reverse)">Age</a></th>
    </tr>
    <tr ng-repeat="friend in friends">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>
</body>