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

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>

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

赞 (0)

相关推荐

  • ANGULARJS中用NG-BIND指令实现单向绑定的例子

    本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用. 不同于jquery只是一个加强和简化前端开发的类库,angularjs是一个完整web前端框架,所以学习曲线高了很多. angularjs给我的感觉类似于Java的Spring框架,处于中心容器位置粘合其他组件,其内置的很多组件已经可以满足一般场景,特殊场景我们可以按照框架思路扩展. 下面从最基础的内容走起: 复制代码 代码如下: <!DOCTYPE html> <html ng-app>

  • angularjs中使用ng-bind-html和ng-include的实例

    下面这个例子,往div标签内添加html内容: <!doctype html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>demo</title> <script type="text/javascript" src="lib/angularjs/angular.min.js"

  • AngularJS ng-bind 指令简单实现

    AngularJS ng-bind 指令 AngularJS 实例 绑定 <p> 内的 innerHTML 到变量 myText: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></sc

  • AngularJS基础 ng-include 指令简单示例

    AngularJS ng-include 指令 AngularJS 实例 包含 HTML 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • AngularJS ng-bind-html 指令详解及实例代码

    AngularJS ng-bind-html 指令 AngularJS 实例 绑定 <p> 内的 innerHTML 到变量 myText: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">&l

  • js中Map和Set的用法及区别实例详解

    js中Map和Set的用法及区别实例详解

    目录 首先了解一下 Map 再来了解一下 Set 总结Map和Set的区别 结语: 首先了解一下 Map Map 是一组键值对的结构,和 JSON 对象类似. (1) Map数据结构如下 这里我们可以看到的是Map的数据结构是一个键值对的结构 (2) key 不仅可以是字符串还可以是对象 var obj ={name:"小如",age:9} let map = new Map() map.set(obj,"111") 打印结果如下 (3) Map常用语法如下 //初

  • jQuery中的on与bind绑定事件区别实例详解

    on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" . selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代. data:当一个事件被触发时要传递event.data给事件处理函数. fn:该事件被触发时执行的函数. false 值也可以做一个函数的简写,返回false. bind(type,[data],fn) 为每

  • Angular7中创建组件/自定义指令/管道的方法实例详解

    组件 使用命令创建组件 •创建组件的命令:ng generate component 组件名 •生成的组件组成: 组件名.html .组件名.ts.组件名.less.组件名.spec.ts •在组件的控制器 @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.less'] }) 手动创建组件 1.创建一个组件ts文件 2.在组件中设

  • Laravel框架中队列和工作(Queues、Jobs)操作实例详解

    在我们的web应用中,经常会遇到这样的情况: 用户在进行了某项操作后,我们需要在后台完成一个耗时且耗费资源的任务,以对应用户的操作. 通常来说,web应用中的操作都是同步的(synchronous),即用户的操作可以立即得到回馈. 但是在以上情况下,同步等待操作结果将是灾难性的.比如用户点击了申请密码重置邮件,倘若我们让用户一直停滞在等待页面,直至邮件发送成功,那么用户体验将非常地不好,因为有时候可能需要很长的时间才能将邮件发送完成. 从另一个角度来说,如果我们服务器处于高负荷的情况,当多个用户

  • C++ 中引用与指针的区别实例详解

    C++ 中引用与指针的区别实例详解 引用是从C++才引入的,在C中不存在.为了搞清楚引用的概念,得先搞明白变量的定义及引用与变量的区别,变量的要素一共有两个:名称与空间. 引用不是变量,它仅仅是变量的别名,没有自己独立的空间,它只符合变量的"名称"这个要素,而"空间"这个要素并不满足.换句话说,引用需要与它所引用的变量共享同一个内存空间,对引用所做的改变实际上是对所引用的变量做出修改.并且引用在定义的时候就必须被初始化.     参数传递的类型及相关要点: 1 按值

  • PHP中的浅复制与深复制的实例详解

    PHP中的浅复制与深复制的实例详解 前言: 最近温习了一下Design Pattern方面的知识,在看到Prototype Pattern这一设计模式时,注意到其中涉及到一个浅复制与深复制的问题.这里来总结一下,提醒自己以后一定要多加注意. 自PHP5起,new运算符自动返回一个引用,一个 对象变量 已经不再保存整个对象的值,只是保存一个标识符来访问真正的对象内容.当对象作为参数传递,作为结果返回,或者赋值给另外一个变量,另外一个变量跟原来的不是引用的关系,只是他们都保存着同一个标识符的拷贝,这

  • C++ 中const对象与const成员函数的实例详解

    C++ 中const对象与const成员函数的实例详解 const对象只能调用const成员函数: #include<iostream> using namespace std; class A { public: void fun()const { cout<<"const 成员函数!"<<endl; } void fun() { cout<<"非const成员函数 !"<<endl; } }; int

  • web.xml中如何设置配置文件的加载路径实例详解

    web.xml中如何设置配置文件的加载路径实例详解 web应用程序通过Tomcat等容器启动时,会首先加载web.xml文件,通常我们工程中的各种配置文件,如日志.数据库.spring的文件等都在此时被加载,下面是两种常用的配置文件加载路径,即配置文件可以放到 SRC目录下或者可以放到WEB-INF根目录下 第一种在web.xml中这样配置: <context-param> <param-name >contextConfigLocation </param-name >

  • C++ 中cerr和cout的区别实例详解

    C++ 中cerr和cout的区别实例详解 前言: cerrThe object controls unbuffered insertions to the standard error output as a byte stream. Once the object is nstructed, the expression cerr.flags & unitbuf is nonzero. Example // iostream_cerr.cpp // compile with: /EHsc /

  • jQuery中text() val()和html()的区别实例详解

    jQuery中text() val()和html()的区别实例详解

    简单的说:html()和text()的区别主要在于是否包含标签.而val()针对的是表单元素. 但是有时还是不是那么太清晰. html(),val(),text()都分为有参和无参. 举例说明它们的不同之处: html()在没有参数的情况下,取得第一个匹配元素的内容.必须要注意的是,即使匹配多个,也只能取得匹配的第一个元素. 如: <body> <p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用.</p> <h3>选中下

随机推荐