Angularjs判断页面是否已经渲染结束（动态给标签长度）

您所在的位置：网站首页 › angular判断dom渲染完成 › Angularjs判断页面是否已经渲染结束（动态给标签长度）

Angularjs判断页面是否已经渲染结束（动态给标签长度）

#Angularjs判断页面是否已经渲染结束（动态给标签长度）| 来源: 网络整理| 查看: 265

相信大家都会碰到这样的问题。页面循环li。但是因为个数不知道。没有办法给li设置固定宽度。那么这时就需要动态计算数据长度并动态改变li的宽度

1 2 3 4 5 周边信息 6 7 8 9 10 11 {{data.aroundName}} 12 {{data.aroundNum}} 13 14 15 16 17

可以默认给个固定宽度，当然不给也是完全OK的

控制器中的数据信息：

$scope.aroundInfoData =[{"aroundName":"所在商圈", "aroundNum":"李宁商圈"}, {"aroundName":"安踏", "aroundNum":"0"}, {"aroundName":"特步", "aroundNum":"1"}, {"aroundName":"361°", "aroundNum":"0"},{"aroundName":"高中", "aroundNum":"3"}, {"aroundName":"耐克", "aroundNum":"0"},{"aroundName":"阿迪达斯", "aroundNum":"2"}, {"aroundName":"瑜伽馆", "aroundNum":"1"},{"aroundName":"大学", "aroundNum":"2"}, {"aroundName":"篮球馆", "aroundNum":"0"},{"aroundName":"健身房", "aroundNum":"0"}]

json数据可以自己造。想造多少都可以

需要监听页面是否渲染结束。AngularJS有$last是最后一个元素。用到指令

app.directive('onFinishRenderFilters', function ($timeout) { return { restrict: 'A', link: function(scope, element, attr) { if (scope.$last === true) { $timeout(function() { scope.$emit('ngRepeatFinished'); }); } } }; });

Controller里面用$on去监听

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) { //监听页面渲染结束 $scope.showLength =$scope.aroundInfoData.length //把实际需要展示数据的格式赋给showLength var titleWidth = document.getElementsByClassName("aroundLength"); for(var i =0;i

【本文地址】

Angularjs判断页面是否已经渲染结束（动态给标签长度）

Angularjs判断页面是否已经渲染结束（动态给标签长度）

今日新闻

推荐新闻