频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
AngularJs使用ng-model-options设置数据同步时机提高网站性能(代码教程)
2018-02-13 14:16:43      个评论    来源:KHOST的博客  
收藏   我要投稿

之前讲过ng-model可以实时改变数据,实现双向数据绑定,但是如果数据是联通后台的,那么当就会实时与后台进行交互,肯定会增加后台的压力,影响性能,比如以下代码:

<input type="text" ng-model="data"/>

<p>{{data}}</p>

因为它的数据是实时更新的,这里可以用一个指令:ng-model-options来解决。

第一种:ng-model-options="{updateOn:'blur'}",当鼠标失去焦点的时候才更新数据:

<input type="text" ng-model="data" ng-model-options="{'updateOn':'blur'}"/>

第二种:ng-model-options="{debounce:3000}",指定几秒之后才更新数据:

<input type="text" ng-model="data" ng-model-options="{'debounce':3000}"/>

第三种:结合以上两种情况一块儿使用:

<input type="text" ng-model="data" ng-model-options="{'updateOn':'default blur', 'debounce':{'default':3000, 'blur':0}}" />

这样可以极高的提升网站性能!

点击复制链接 与好友分享!回本站首页
上一篇:CSS定位、CSS的position属性实例讲解
下一篇:uml用例图:什么是用例图?用例图中的关系
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站