Angularjs中数据绑定的实例详解

更新时间：2017年08月25日 11:36:41 投稿：lqh

这篇文章主要介绍了Angularjs中数据绑定的实例详解的相关资料,这里提供简单实例，大家可以参考下，希望通过本文可以掌握这部分内容，需要的朋友可以参考下

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>

如有疑问请留言或者到本站社区交流讨论，大家共同进步，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

Angular4 中内置指令的基本用法
不得不说指令是ng最为强大的功能之一，好吧，也可以去掉之一，是最强大的功能。下面这篇文章主要给大家介绍了关于Angular4中内置指令的基本用法，文中通过示例代码介绍的非常详细，需要的朋友们下面来一起看看吧。
2017-07-07
AngularJS实用开发技巧(推荐)
Angular JS 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。接下来通过本文给大家介绍AngularJS实用开发技巧的相关资料,需要的朋友可以参考下
2016-07-07
Angular使用Restful的增删改
今天小编就为大家分享一篇关于Angular使用Restful的增删改，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-12-12
解决Angular2 router.navigate刷新页面的问题
今天小编就为大家分享一篇解决Angular2 router.navigate刷新页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
AngularJS实现自定义指令及指令配置项的方法
这篇文章主要介绍了AngularJS实现自定义指令及指令配置项的方法,结合实例形式简单总结分析了AngularJS自定义指令及指令配置项的实现技巧,需要的朋友可以参考下
2017-11-11
详解angular中的作用域及继承
本篇文章主要介绍了详解angular中的作用域及继承，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
AngularJS中$apply方法和$watch方法用法总结
这篇文章主要介绍了AngularJS中$apply方法和$watch方法用法,结合实例形式总结分析了$apply方法和$watch方法的功能、参数含义、使用技巧与相关注意事项,需要的朋友可以参考下
2016-12-12
实例详解AngularJS实现无限级联动菜单
这篇文章主要介绍了实例详解AngularJS实现无限级联动菜单的相关资料,需要的朋友可以参考下
2016-01-01
Angular1.x自定义指令实例详解
这篇文章主要介绍了Angular1.x自定义指令,结合实例形式分析了Angular1.x自定义指令的实现与使用方法,以及相关操作技巧与注意事项,需要的朋友可以参考下
2017-03-03
AngularJS入门教程之数据绑定用法示例
这篇文章主要介绍了AngularJS之数据绑定用法,结合实例形式分析了AngularJS基于内置指令ng-model实现数据绑定的操作技巧,需要的朋友可以参考下
2016-11-11