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 TO HTML 转换
Jun 26 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
react antd实现动态增减表单
Jun 03 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输入流php://input使用浅析
2014/09/02 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
Express.JS使用详解
2014/07/17 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python中的字符串替换操作示例
2016/06/27 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
TensorFlow的权值更新方法
2018/06/14 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
存储过程和函数的区别
2013/05/28 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
珍惜水资源建议书
2014/03/12 职场文书
大班下学期个人总结
2015/02/13 职场文书
员工安全责任协议书
2016/03/22 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python