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脚本调试方法小结
Nov 24 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
js获取页面description的方法
May 21 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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处理restful请求的路由类分享
2014/02/27 PHP
php上传excel表格并获取数据
2017/04/27 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
vuejs指令详解
2017/02/07 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python装饰器用法示例小结
2018/02/11 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
python如何实现复制目录到指定目录
2020/02/13 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
金鑫耀Java笔试题
2014/09/06 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
初三学习决心书
2014/03/11 职场文书
安全生产责任书
2014/03/12 职场文书
国窖1573广告词
2014/03/21 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
博士生专家推荐信
2014/09/26 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
投标单位介绍信
2015/05/05 职场文书
检讨书怎么写
2015/05/07 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python