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 相关文章推荐
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
Angular2入门--架构总览
Mar 29 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
JS实现纸牌发牌动画
Jan 19 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
require.js中的define函数详解
2017/07/10 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
python的三目运算符和not in运算符使用示例
2014/03/03 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python如何爬取个性签名
2018/06/19 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
社区助残日活动总结
2014/08/29 职场文书
建设工程授权委托书
2014/09/22 职场文书
研究生个人学年总结
2015/02/14 职场文书
先进工作者个人总结
2015/02/15 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
生产车间管理制度
2015/08/04 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Python实现排序方法常见的四种
2021/07/15 Python
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL