Angularjs判断页面是否已经渲染结束(动态给标签长度)
相信大家都会碰到这样的问题。页面循环li。但是因为个数不知道。没有办法给li设置固定宽度。那么这时就需要动态计算数据长度并动态改变li的宽度
<!--周边信息-->
<div class="around_information">
<div class="title_info">
<i></i>
<p>周边信息</p>
</div>
<div class="around_info">
<div class="around_table">
<ul>
<li class="aroundLength" ng-repeat="data in aroundInfoData"on-finish-render-filters>
<label>{{data.aroundName}}</label>
<p>{{data.aroundNum}}</p>
</li>
</ul>
</div>
</div>
</div>
<li></li>可以默认给个固定宽度,当然不给也是完全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<document.getElementsByClassName("aroundLength").length;i++){
document.getElementsByClassName("aroundLength")[i].style.width = (100/$scope.showLength)+"%";
}
});
预期结果:
Angularjs判断页面是否已经渲染结束(动态给标签长度)的更多相关文章
- vue中判断页面滚动开始和结束
参考链接:https://www.jianshu.com/p/adad39705ced 和 https://blog.csdn.net/weixin_44309374/article/deta ...
- angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法呢?
angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法 关键字: $timeout app.directive("myDirective",func ...
- document.readyState等属性,判断页面是否加载完
如何在页面加载完成后再去做某事?什么方法可以判断当前页面加载已完成?document.readyState 判断页面是否加载完成?javascript提供了document.readyState==& ...
- AngularJS应用页面切换优化方案
葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...
- Diy页面服务端渲染解决方案
1. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...
- AngularJs应用页面
AngularJs应用页面切换优化方案 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如 ...
- 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法
最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...
- .NET实时2D渲染入门·动态时钟
.NET实时2D渲染入门·动态时钟 从小以来"坦克大战"."魂斗罗"等游戏总令我魂牵梦绕.这些游戏的基础就是2D实时渲染,以前没意识,直到后来找到了Direct ...
- JavaScript——判断页面是否加载完成
前言 接上文,既然你是做一个loading的效果,你总不能一直loading,当页面完成加载的时候你总要结束吧 步骤 先说下原生的方法,再讲jquery的方法,原理是一样的 JavaScript // ...
随机推荐
- 驱动调试(四)oops确定调用树
目录 驱动调试(四)oops确定调用树 内核开启调用树 栈指针分析 原理 寄存器别名 基础解释 例子分析 找到PC地址的位置 栈分析 附录:原文的excel title: 驱动调试(四)oops确定调 ...
- matlab中cumsum函数
matlab中cumsum函数通常用于计算一个数组各行的累加值.在matlab的命令窗口中输入doc cumsum或者help cumsum即可获得该函数的帮助信息. 格式一:B = cumsum(A ...
- Angular记录(1)
文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...
- metasploit 教程之信息收集
信息收集 信息收集范围很大,可以从不同层面,不同维度进行信息收集. 系统补丁 我们知道目标机器缺少什么补丁就意味着存在与其对应的漏洞.我们可以利用这些漏洞来达到我们渗透攻击的目的. # 使用的模块 u ...
- 《我是一只IT小小鸟读后感》
在我步入大学前,并未了解何为IT,真是毫无知晓.由于种种原因最终还是选择了软件工程专业,是 对是错,是福是祸,不知该不该去考虑,但即已然 选择了这条路,便得付出一些努力,这个世界总 是有许多在默默努力 ...
- C++ 变长模板参数
转载自: http://www.cnblogs.com/liyiwen/archive/2013/04/13/3018608.html C++11 语言核心的改进中,最为关注的有 rvalue ref ...
- 萌新的IDEA_web开发笔记(未完)
萌新IDEA_web开发笔记 按兴趣自己搞的网页: http://47.94.140.98:8080/ow_web/my_web/web/ 暂时还没做完. 部署在租的服务器上面,背景视频加载可能有点慢 ...
- zTree动态初始化树形结构加载
zTree动态加载初始化,纠结了一小下.最终还是做出来了.注意动态获取数据在前,初始化树形结构放在成功的回调函数中,并放在$(document).ready(function () {})中: $(d ...
- MS SQL Server NULL处理
-- 首先在用户表中插入数据如下 TRUNCATE TABLE UserInfo ; INSERT INTO userinfo(UserName,UserLogin,UserPassword,User ...
- C++实验一
2-28 #include <iostream> using namespace std; int main() {char x; cout<<"Menu: A(dd ...