angularjs中的数据绑定分析

不点 阅读:152 2021-09-07 17:40:45 评论:0
本文章主要介绍了angularjs中的数据绑定,具有不错的的参考价值,希望对您有所帮助,如解说有误或未考虑完全的地方,请您留言指出,谢谢!

这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果

<html ng-app> 
<head> 
<title>angularjs-include</title> 
<script type="text/javascript" src="js/angular/angular.min.js"></script> 
</head> 
<body> 
<input type="text" ng-model="name" value="" /><br /> 
<div>Hello,{{name}}</div> 
</body> 
</html>

关于数据双向绑定,有时候不需要实时同步,比如当输入框失去焦点的时候才去更新div里面的内容,这里可以用上ng-model-options属性来解决,将上面的代码稍做修改:

<html ng-app> 
<head> 
<title>angularjs-include</title> 
<script type="text/javascript" src="js/angular/angular.min.js"></script> 
</head> 
<body> 
<input type="text" ng-model="name" value="" ng-model-options="{ updateOn: 'blur' }" /><br /> 
<div>Hello,{{name}}</div> 
</body> 
</html>

 或者改为每隔1秒来更新:

<html ng-app> 
<head> 
<title>angularjs-include</title> 
<script type="text/javascript" src="js/angular/angular.min.js"></script> 
</head> 
<body> 
<input type="text" ng-model="name" value="" ng-model-options="{ debounce: {default:1000} }" /><br /> 
<div>Hello,{{name}}</div> 
</body> 
</html>

标签:前端
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号