网站首页 » 前端开发 » JavaScript » AngularJS ng-repeat 遍历完成(repeatFinish)
上一篇:
下一篇:

AngularJS ng-repeat 遍历完成(repeatFinish)

AngularJS 中的 ng-repeat 相信你已经再熟悉不过了,在这里也没有什么好说的,本文主要是想分享下 ng-repeat 完成的判断。这个判断也很常用,比如页面中的轮播图就很有可能会用到这个判断。所以我们现在就开始吧!

看这里
<!DOCTYPE html>
<html lang="en" ng-app="yk">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $repeatFinish</title>
    <script src="http://yunkus.com/demo/lib/js/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl">
<ul>
    <li ng-repeat="item in dataSource" repeat-finish="finishFn()">{{item.city}}</li>
</ul>
</div>
<script>
var m = angular.module("yk",[]);
m.controller("ctrl",["$scope",function($scope){
    $scope.dataSource = [
        {city:"珠海",value:"zhuhai",country:"China"},
        {city:"广州",value:"guangzhou",country:"China"},
        {city:"深圳",value:"shenzhen",country:"China"},
        {city:"韶关",value:"shaoguan",country:"China"},
        {city:"Alaska",value:"alaska",country:"America"},
        {city:"New York",value:"newyork",country:"America"},
        {city:"Washington",value:"washington",country:"America"},
        {city:"California",value:"california",country:"America"},
    ];

    $scope.finishFn = function(){
        console.log("ng-repeat执行完毕");
    }
}]);

m.directive('repeatFinish',function(){
    return {
        link: function(scope,element,attr){
            if(scope.$last == true){ // 是否为最后一个
                scope.$eval( attr.repeatFinish ) // 执行指定函数
            }
        }
    }
})
</script>
</body>
</html>

把这个功能封装成一个指令,你就可以在任意页面中使用这个指令了。注意下指令的命名也写法,指令命名用驼峰法,在页面中使用这个指令时用 “-” 隔开。这里还有个小问题,当你把console.log() 改成alert() 时,你会发现当数据遍历完后,弹窗出来了,但页面中的数据可能还没有出来,或者还没有显示完或者还没渲染完,为了解决这个问题,最好延迟执行 $eval() 。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angularjs-repeat-finish/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END