anjularJs真的是个好东西,让web开发变得更简单~,这里讲下用anjularJS开发的web页面,怎么添加动态加载效果
这里有三个必备的条件:
一:动态效果图
可在线制作,这里给个网址:http://ajaxload.info/
将做好的动态图放到工程的webapp目录下,如:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2QvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2LcZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39DOxUDMxQzM5ATMwITM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
二:controller 里边的scope包装的数据变量
加载数据完成时,改变loading值
三.ng-if 判断操作,ng-if=true时 元素下的内容才会显示出来
<span ng-model="tables" ng-if="!loading">{{tables|number}}</span><img ng-if="loading" src="images/ajax-loader-small.gif"/>张资源表,<span ng-model="indexs" ng-if="!loading">{{indexs|number}}</span><img ng-if="loading" src="images/ajax-loader-small.gif"/>条记录
<label><input ng-if='!loading' type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"><img ng-if="loading" src="images/ajax-loader-small.gif"/>全选</label>
效果图