相信大家都会碰到这样的问题。页面循环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判断页面是否已经渲染结束(动态给标签长度)的更多相关文章

  1. vue中判断页面滚动开始和结束

    参考链接:https://www.jianshu.com/p/adad39705ced    和  https://blog.csdn.net/weixin_44309374/article/deta ...

  2. angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法呢?

    angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法 关键字: $timeout app.directive("myDirective",func ...

  3. document.readyState等属性,判断页面是否加载完

    如何在页面加载完成后再去做某事?什么方法可以判断当前页面加载已完成?document.readyState 判断页面是否加载完成?javascript提供了document.readyState==& ...

  4. AngularJS应用页面切换优化方案

    葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...

  5. Diy页面服务端渲染解决方案

    1. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...

  6. AngularJs应用页面

    AngularJs应用页面切换优化方案   葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如 ...

  7. 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法

    最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...

  8. .NET实时2D渲染入门·动态时钟

    .NET实时2D渲染入门·动态时钟 从小以来"坦克大战"."魂斗罗"等游戏总令我魂牵梦绕.这些游戏的基础就是2D实时渲染,以前没意识,直到后来找到了Direct ...

  9. JavaScript——判断页面是否加载完成

    前言 接上文,既然你是做一个loading的效果,你总不能一直loading,当页面完成加载的时候你总要结束吧 步骤 先说下原生的方法,再讲jquery的方法,原理是一样的 JavaScript // ...

随机推荐

  1. prometheus 标签使用

    标签的配置使用 考虑到要明智地使用标签,我们需要给事物重新命名.在一个集中的.复杂的监视环境中,我们有时无法控制正在监视的所有资源以及它们公开的监视数据.重新标记允许在自己的环境中控制.管理和潜在地标 ...

  2. Numpy进阶操作

    目录 1. 如何获取满足条设定件的索引 2. 如何将数据导入和导出csv文件 3. 如何保存和加载numpy对象 4. 如何按列或行拼接numpy数组 5. 如何按列对numpy数组进行排序 6. 如 ...

  3. python 线程/线程锁/信号量

    单线程 #常规写法 import threading import time def sayhi(num): # 定义每个线程要运行的函数 print("running on number: ...

  4. Entity Framework入门教程(17)---记录和拦截数据库命令

    记录和拦截数据库命令 这一节介绍EF6怎么记录和拦截发送给数据库的查询和操作命令. 1.记录EF发送给数据库命令(DbContext.Database.Log) 以前给了查看EF发送给数据库的命令我们 ...

  5. sublime中编译的sass如何改变css输出风格?【这里有答案】

    由于在网上找了一遍没找到如果在sublime中将sass编译的css转换成为自己喜欢的风格,所以换了一种思路搜索到了答案,这里我将讲述如果更改. 首先sass总共有四种编译风格 (1) nested( ...

  6. ruby 对象转换哈希(Hash)

    通过 ActiveRecord 从数据库的某张数据表(table)中获取的对象如何转换成为 Hash orders_table 是一张订单信息表,对应的 model 为 Orders @order = ...

  7. JAVA发红包案例

    模拟拼手气红包* 对于指定总金额以及红包个数,可以生成不同金额的红包,*,每个红包金额随机生成. * 分析这个题目:* 1.首先需要一个分发红包的方法.输入的参数是 总金额 以及 红包个数.* 按照这 ...

  8. tf.py_func

    在 faster  rcnn的tensorflow 实现中看到这个函数 rois,rpn_scores=tf.py_func(proposal_layer,[rpn_cls_prob,rpn_bbox ...

  9. php的phar是什么?

    phar 要求5.2以上 前言 最近在看composer,是下载了一个composer.phar,然后放到/usr/local/bin目录下,就可以全局使用composer了,然而并不懂phar是什么 ...

  10. OSI七层模型与TCP/IP五层模型

    博主是搞是个FPGA的,一直没有真正的研究过以太网相关的技术,现在终于能静下心学习一下,希望自己能更深入的掌握这项最基本的通信接口技术.下面就开始搞了. 一.OSI参考模型         今天我们先 ...