Question

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

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

控制：

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

Answer 2

不确定这是否是您正在寻找的，但将这些添加到ng-repeat循环的主体可能会起到作用：

<a id="top" ng-if="$first">Top</a>
<a id="bottom" ng-if="$last">Bottom"</a>

<span ng-if="$first" onclick="#bottom">Click to go to bottom</span>
<span ng-if="$last"  onclick="#top">Click to go to top</span>

<a>元素在列表的顶部（第一个）和底部（最后一个）项目中创建锚点，<span>元素创建可点击的标签以导航到这些项目。

angularjs ng-repeat - 添加一个锚点，从上到下，从下到上跳跃

2 个答案:

DEMO