ng-bind、ng-value和ng-model
2017-07-23 01:07
603 查看
在html页面中定义angular的赋值表达式,要么用ng-value,要么用ng-bind,要要么用ng-init
使用ng-init、ng-bind、ng-value、ng-model指令都可以生成数据模型,即如果 scope 中不存在变量, 将会创建它。
ng-init只能用于生成数据模型
ng-bind、ng-value、ng-model指令既可以绑定已有的变量,也可以生成数据模型,即如果 scope 中不存在变量, 将会创建它。
我们可以使用一个赋值表达式生成数据模型。
ng-bind、ng-value、ng-model指令是基于ng-init的拓展,使用赋值表达式生成数据模型的功能,其实是ng-init的东西。
但是这三个指令拓展出了自己独有的功能:
ng-bind在使用赋值表达式生成数据模型的同时,还绑定变量到元素的innerHTML中;
ng-value在使用赋值表达式生成数据模型的同时,还绑定变量到元素的value属性中;
ng-model有点特殊,专用于表单元素,即只能用于表单元素,用于其它元素无效,它实现了数据的双向绑定,不但可以绑定变量到元素的value属性中,还可以绑定表单元素的输入值到数据模型(变量)中去。
使用ng-value无法绑定表单元素的输入值到数据模型(变量)中。
在input中的值,若ng-model与ng-value都存在的话,则ng-value中值会被覆盖,显示ng-model中的值 。
ng-model的优先级更高。
如下面的代码,使用ng-init创建变量并赋值,再用ng-bind绑定<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="myText='Hello World!'">
<p ng-bind="myText"></p>
</div>
</body>
</html>相当于直接使用ng-bind的赋值表达式
既生成数据模型p.xh,同时又输出序号值到td的文本内容上
使用ng-init、ng-bind、ng-value、ng-model指令都可以生成数据模型,即如果 scope 中不存在变量, 将会创建它。
ng-init只能用于生成数据模型
ng-bind、ng-value、ng-model指令既可以绑定已有的变量,也可以生成数据模型,即如果 scope 中不存在变量, 将会创建它。
我们可以使用一个赋值表达式生成数据模型。
ng-bind、ng-value、ng-model指令是基于ng-init的拓展,使用赋值表达式生成数据模型的功能,其实是ng-init的东西。
但是这三个指令拓展出了自己独有的功能:
ng-bind在使用赋值表达式生成数据模型的同时,还绑定变量到元素的innerHTML中;
ng-value在使用赋值表达式生成数据模型的同时,还绑定变量到元素的value属性中;
ng-model有点特殊,专用于表单元素,即只能用于表单元素,用于其它元素无效,它实现了数据的双向绑定,不但可以绑定变量到元素的value属性中,还可以绑定表单元素的输入值到数据模型(变量)中去。
使用ng-value无法绑定表单元素的输入值到数据模型(变量)中。
在input中的值,若ng-model与ng-value都存在的话,则ng-value中值会被覆盖,显示ng-model中的值 。
ng-model的优先级更高。
如下面的代码,使用ng-init创建变量并赋值,再用ng-bind绑定<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="myText='Hello World!'">
<p ng-bind="myText"></p>
</div>
</body>
</html>相当于直接使用ng-bind的赋值表达式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p ng-bind="myText='Hello World!'"></p> </div> </body> </html>
<table width="100%" border="0" cellspacing="1" cellpadding="0" > <tr ng-jprefix="taxML.formContent.root.body.zzszyfpGrid.zzszyfpGridlb"> <td align="center" class="title01"><strong>序号</strong></td> <td align="center" class="title01" ><strong><span style="color:red">*</span>发票代码</strong></td> <td align="center" class="title01"><strong><span style="color:red">*</span>发票号码</strong></td> <td align="center" class="title01" ><strong><span style="color:red">*</span>开票日期</strong></td> <td align="center" class="title01" ><strong><span style="color:red">*</span>金额</strong></td> <td align="center" class="title01" ><strong><span style="color:red">*</span>税额</strong></td> <td align="center" class="title01" ><strong><span style="color:red">*</span>销方纳税人识别号</strong></td> <td align="center" class="title01" ><strong><span style="color:red">*</span>销方纳税人名称</strong></td> <td class="edit" align="center" width="13%"><strong>操作</strong></td> </tr> <tr ng-repeat="p in zzszyfpGridlb track by $index" ng-repeat-init="zzszyfpGridlb" skip-elem="Y" ng-render-finish=""> <!-- <td align="center" class="title01" ng-model="p.xh" ng-bind="$index+1"/> --> <!-- <td align="center" class="title01" ng-bind="$index+1" ng-init="p.xh=$index+1"/> --> <td align="center" class="title01" ng-bind="p.xh=$index+1" /> <td class="edit"> <select ng-model="p.fpDm" ng-hide="p.selectSwfp" ng-change="checkSwfp($index)" ng-options="key as value for (key,value) in CT.yhhbCT" affectNode="yhyywdDm"><option value="">请选择</option></select> <input type="hidden" ng-value="p.fpmc=CT.yhhbCT[p.fpDm]" /> <input type="text" ng-model="p.fpDm" ng-show="p.selectSwfp" /> </td> <td class="edit"><input type="text" ng-model="p.fphm"/></td> <td class="edit"><input type="text" ng-model="p.kprq" ng-laydate="{yyyy-MM-dd}"/></td> <td class="edit"><input type="text" ng-model="p.je" ng-datatype="number{14.2}" /></td> <td class="edit"><input type="text" ng-model="p.se" ng-datatype="number{14.2}" /></td> <td class="edit"><input type="text" ng-model="p.xhfnsrsbh" ng-blur="checkxhfnsrsbh($index)"/></td> <td class="edit"><input type="text" ng-model="p.xhfnsrmc"/></td> <td class="edit" align="center" width="13%"> <a class="sbtn sbtn01" ng-href="#" ng-click="add()">增加</a> <a class="sbtn sbtn03" ng-if="($index!=0)" ng-href="#" ng-click="del($index)">删除</a> </td> </tr> </table>对于序号的显示,我们使用<td align="center" class="title01" ng-bind="p.xh=$index+1" />
既生成数据模型p.xh,同时又输出序号值到td的文本内容上
相关文章推荐
- ng-model,ng-value,ng-bind,{{}}----angularJS数据绑定
- ng-model、ng-bind、ng-value使用区别
- data-ng-bind和data-ng-value
- NgModelController: $setViewValue,$render,Formatter, Parser
- AngularJs中模块的依赖注入,ng-model、ng-bind和{{}}的区别,路由机制
- Angular中ng-bind和ng-model的区别实例详解
- Angular中的ng-bind和ng-model区别
- angularjs中ng-bind和ng-model用法
- ng-model与ng-value的区别
- AngularJS 关于ng-model和ng-bind还有{{}}
- ng-bind 与ng-model区别
- angularjs 1.3 综合学习 (one way bind , ng-if , ng-switch , ng-messages, ng-form ,ng-model )
- angular中ng-bind和ng-model的区别
- AngularJs中模块的依赖注入,ng-model、ng-bind和{{}}的区别,路由机制。
- angular-js的ng-bind与ng-model区别
- ng-bind 与ng-model区别
- ng-model和ng-bind区别
- angular应用,一个input上有自定义directive和ng-model,怎么在directive更新input的value时更新model
- ionic 自定义指令无法获取绑定值,ngModelController.$viewValue无法使用
- AngularJs-ng-app -ng-model-ng-bind指令讲解和使用