<!--周边信息-->
<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)+"%";
}
});
预期结果:见上传的图片