Angular中ng-bind和ng-model的区别实例详解


Posted in Javascript onApril 10, 2017

ng-bind和ng-model的区别

AngularJS的数据绑定有ng-bind和ng-model,一般用于如下:

<input ng-model="object.xxx">
<span ng-bind="object.xxx"></span>

ng-bind是单向绑定,由作用于$scope到view层,且在HTML控件(HTML控件有:input、select、button和textarea)中不可显示。

ng-model是双向绑定,$scope<--->view层。

{{}}用于显示数据。

完整代码

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<head> 
<style> 
div textarea{ 
 background-color:yellow; 
} 
</style> 
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head> 
<body ng-app="myNoteApp"> 
<div class="aa" ng-controller="myNoteCtrl"> 
<h2>我的笔记</h2> 
<p> 
<textarea ng-model="message" rows="10" cols="20" maxlength="100"> 
</textarea> 
</p> 
<p> 
<button ng-click="save()">保存</button> 
<button ng-click="clear()">清除</button> 
</p> 
<p>Number of characters left: <span ng-bind="left()"></span></p> 
<p>Number of characters left(method2): <span>{{leftvar}}</span></p> 
</div> 
<script> 
var app = angular.module("myNoteApp",[]); 
app.controller("myNoteCtrl",function($scope){ 
  $scope.message = ""; 
  $scope.leftvar = 0; 
  $scope.left = function() {$scope.leftvar = 100 - $scope.message.length;return $scope.leftvar;}; 
  $scope.clear = function() {$scope.message = "";}; 
  $scope.save = function() {alert("Note Saved");}; 
}); 
</script> 
</body> 
</html>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 #Javascript
Vue2递归组件实现树形菜单
Apr 10 #Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 #Javascript
javascript防篡改对象实例详解
Apr 10 #Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 #jQuery
ES6教程之for循环和Map,Set用法分析
Apr 10 #Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 #Javascript
You might like
php简单静态页生成过程
2008/03/27 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
php压缩文件夹最新版
2018/07/18 PHP
MSN消息提示类
2006/09/05 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
python搜索算法原理及实例讲解
2020/11/18 Python
如何用Django处理gzip数据流
2021/01/29 Python
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
英文版银行求职信
2013/10/09 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
防灾减灾活动总结
2014/08/30 职场文书
药店采购员岗位职责
2014/09/30 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
借款民事起诉状范文
2015/05/19 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
Python基本知识点总结
2022/04/07 Python
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers