ng-init、ng-bind、ng-model和ng-value区别

ng-init :

初始化应用时创建变量，并给变量赋值。初始化多个变量时用分号 ; 隔开。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body><div ng-app="" ng-init="myText='Hello World!'">
<h1>{{myText}}</h1>
</div></body>
</html>

ng-bind :

ng-init 的拓展（具备 ng-init 功能），绑定变量到元素的 innerHTML 中，是单向绑定。

因此应绑定值不可变的元素上，如：span、a、h1等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body><div ng-app="" ng-init="myText='Hello World!'">
<h1 ng-bind="myText"></h1>
<test ng-bind="myText"></test>
</div></body>
</html>

上面的<test>标签是自己随意造的一个标签，通过下面的图片可知，ng-bind 绑定 myText 变量到<test>标签的 innerHTML 中了。

ng-value :

ng-init 的拓展（具备 ng-init 功能），绑定变量到元素的 value 属性中，主要用于设置 input 或 select 元素的 value 属性，是单向绑定。

因此应绑定到值可变的元素上，如：input、textarea、select等，或者可以绑定到有 value 属性的元素上。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body><div ng-app="" ng-init="myText='Hello World!'">
<input type="text" ng-value="myText"/></br>
<test ng-value="myText"></test>
</div></body>
</html>

上面的<test>标签是自己随意造的一个标签，通过下面的图片可知，ng-value 绑定 myText 变量到<test>标签的 value 属性上了。

ng-model :

ng-init 的拓展（具备 ng-init 功能），只能用于 值可变表单元素，其它元素无效。不但绑定变量到元素的输入值中，同时绑定元素的输入值到变量中，是双向绑定。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body><div ng-app="" ng-init="myText='Hello World!'">
<input type="text" ng-model="myText"/></br>
<h1 ng-bind="myText"></h1>
</div></body>
</html>

ng-init、ng-bind、ng-model和ng-value区别相关推荐

ng: Can't bind to 'ngModel' since it isn't a known property of 'input'. - Angular 6
[出现的问题]ng: Can't bind to 'ngModel' since it isn't a known property of 'input'. [解决方法]导入 FormsModule ...
静态方法与非静态方法的区别_程序员必看之ThinkPHP5中model与Db的区别
在ThinkPHP5的使用过程中,很多使用者刚接触到数据库操作时,不能很好调用相关的方法进行数据库的交互.下面就分享一下ThinkPHP5中Db与模型的区别关于db与model的选择使用DB方式是 ...
vue：model和v-model的区别
v-model: 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取 ...
Model和ModelMap的区别，以及背后那个男人~
Model和ModelMap的区别在彻彻底底的理解他们之前,首先了解复习一下java.util.Map接口.它有四个实现类,分别是 HashMap ,Hashtable ,LinkedHashMap ...
【Machine Learning】【Andrew Ng】- notes(Week 1: model and cost function)
Model Representation: To describe the supervised learning problem slightly more formally, our goal i ...
ASP.NET MVC one view bind many model
一.自定义视图模型 model.cs public class AorBvm{public List<Role> GetRole { get; set; }public List<C ...
jQuery的.bind()、.live()和.delegate()之间区别
2019独角兽企业重金招聘Python工程师标准>>> 基本要素 DOM树首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡 ...
jQuery中的.bind()、.live()和.delegate()之间区别分析
DOM树首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何 ...
odoo API装饰器one、model、multi的区别
1.one装饰器详解 odoo新API中定义方式: date=fields.Date(string="date",compute="_get_date" ...
entity、model和domain三者区别
先用三句话来简单描述一下他们各自的特点: 名称特点 entity 字段必须和数据库字段一样 model 前端需要什么我们就给什么 domain 比较少用,代表一个对象模块 1.entity实体 en ...

ng-init、ng-bind、ng-model和ng-value区别

ng-init、ng-bind、ng-model和ng-value区别相关推荐

最新文章

热门文章