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 应用技巧集合[推荐]
Aug 30 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
jquery实现网页定位导航
Aug 23 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
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 empty函数 使用说明
2009/08/10 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP中soap的用法实例
2014/10/24 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
javascript中的new使用
2010/03/20 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
浅析return false的正确使用
2013/11/04 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
javascript常用方法汇总
2014/12/02 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
应届毕业生个人求职信范文
2014/01/29 职场文书
网络营销策划方案
2014/06/04 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
2015国庆节感想
2015/08/04 职场文书
中秋节主题班会
2015/08/14 职场文书
二年级作文之动物作文
2019/11/13 职场文书
用python画城市轮播地图
2021/05/28 Python
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技