javascript - angularjs ng-repeat - 添加一个 anchor 以从上到下和从下到上跳转

Question

我正在使用 ng-repeat 来迭代有时可能超过一千条记录的数组。我想知道是否有一种方法可以将某种类型的 anchor 添加到第一个记录(列表中的最后一个)，这样我就可以在不向下滚动所有记录的情况下找到它。这是我的代码:

<div  ng-repeat="emps in Savedcontacts">
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">

                    <div class="infoRapper_c">
                        <div class="infoRapper-pad_c">



                            <table>
                                <tr>
                                    <td class="phonetd1_c ">
                                        <p>{{emps.F_NAME}} {{emps.L_NAME}} </p>
                                        <span class="glyphicon glyphicon-earphone mylittlephone_c"> </span> <a class="phoneNumber_c" href="tel:{{emps.PHONE}}"> {{emps.PHONE|cleanPhoneNum}}</a>
                                    </td>

                                    <td class="phonetd2_c">
                                        <!-- table inside <td>  -->
                                        <table>
                                            <tr class="phonetd2_table_tr1_c"><td class="phonetd2_table_td1_c">{{$index + 1}}</td></tr>
                                            <tr class="phonetd2_table_tr2_c"><td ng-click="getLocalDetails('/employeesLocalDetails/' + emps.USERID)" class="phonetd2_table_td2_c">>>></td></tr>
                                            <tr class="phonetd2_table_tr3_c"><td class="phonetd2_table_td3_c"></td></tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-footer"><hr /></div>
</div>

Answer 1

您在 Angular Documentation 中有一个示例.

<button ng-click="goToBottom()">Go to last</button>
<div id="bloc{{$index}}" ng-repeat="bloc in data">Bloc {{bloc}}</div>

Ctrl:

app.controller('MainCtrl', function($scope,$anchorScroll) {
  $scope.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]

  $scope.goToBottom = function () {
    // scroll to last id
    $anchorScroll('bloc' + ($scope.data.length -1));
  }
});

DEMO