欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

ng-bind、ng-value和ng-model 有大用

ng-bind、ng-value和ng-model


<input type="hidden" name="banci_id" ng-value="modify_banci.banci_id">

  type 为 hidden时 好像 使用ng-model 取不到值,,,,ng-value 是可以取到值的



下面这个肯定行的
<
input type="button" value="{{ enable_distable_banci }}">

下面这个肯定行的
<input type="button" ng-value="{{ enable_distable_banci }}">

下面这个好像不行
<
input type="button" ng-mode="enable_distable_banci">


版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/qq_26222859/article/details/75809988

在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的东西。
但是这三个指令拓展出了自己独有的功能:

  1. ng-bind在使用赋值表达式生成数据模型的同时,还绑定变量到元素的innerHTML中;

  2. ng-value在使用赋值表达式生成数据模型的同时,还绑定变量到元素的value属性中;

  3. ng-model有点特殊,专用于表单元素,即只能用于表单元素,用于其它元素无效,它实现了数据的双向绑定,不但可以绑定变量到元素的value属性中,还可以绑定表单元素的输入值到数据模型(变量)中去。

 使用ng-value无法绑定表单元素的输入值到数据模型(变量)中。

在input中的值,若ng-model与ng-value都存在的话,则ng-value中值会被覆盖,显示ng-model中的值 。

ng-model的优先级更高。

如下面的代码,使用ng-init创建变量并赋值,再用ng-bind绑定

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  6. </head>
  7. <body>
  8. <div ng-app="" ng-init="myText='Hello World!'">
  9. <p ng-bind="myText"></p>
  10. </div>
  11. </body>
  12. </html>
相当于直接使用ng-bind的赋值表达式
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  6. </head>
  7. <body>
  8. <div ng-app="">
  9. <p ng-bind="myText='Hello World!'"></p>
  10. </div>
  11. </body>
  12. </html>
  1. <table width="100%" border="0" cellspacing="1" cellpadding="0" >
  2. <tr   ng-jprefix="taxML.formContent.root.body.zzszyfpGrid.zzszyfpGridlb">
  3. <td align="center" class="title01"><strong>序号</strong></td>
  4. <td align="center" class="title01" ><strong><span style="color:red">*</span>发票代码</strong></td>
  5. <td align="center" class="title01"><strong><span style="color:red">*</span>发票号码</strong></td>
  6. <td align="center" class="title01" ><strong><span style="color:red">*</span>开票日期</strong></td>
  7. <td align="center" class="title01" ><strong><span style="color:red">*</span>金额</strong></td>
  8. <td align="center" class="title01" ><strong><span style="color:red">*</span>税额</strong></td>
  9. <td align="center" class="title01" ><strong><span style="color:red">*</span>销方纳税人识别号</strong></td>
  10. <td align="center" class="title01" ><strong><span style="color:red">*</span>销方纳税人名称</strong></td>
  11. <td  class="edit" align="center" width="13%"><strong>操作</strong></td>
  12. </tr>
  13. <tr ng-repeat="p in zzszyfpGridlb track by $index" ng-repeat-init="zzszyfpGridlb" skip-elem="Y"   ng-render-finish="">
  14. <!-- <td  align="center" class="title01" ng-model="p.xh"  ng-bind="$index+1"/> -->
  15. <!-- <td  align="center" class="title01"  ng-bind="$index+1"  ng-init="p.xh=$index+1"/> -->
  16. <td  align="center" class="title01"  ng-bind="p.xh=$index+1" />
  17. <td class="edit">
  18. <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>
  19. <input type="hidden" ng-value="p.fpmc=CT.yhhbCT[p.fpDm]" />
  20. <input type="text"  ng-model="p.fpDm"  ng-show="p.selectSwfp" /> </td>
  21. <td class="edit"><input type="text"   ng-model="p.fphm"/></td>
  22. <td class="edit"><input type="text"  ng-model="p.kprq" ng-laydate="{yyyy-MM-dd}"/></td>
  23. <td class="edit"><input type="text"   ng-model="p.je"    ng-datatype="number{14.2}"  /></td>
  24. <td class="edit"><input type="text"   ng-model="p.se"   ng-datatype="number{14.2}" /></td>
  25. <td class="edit"><input type="text"   ng-model="p.xhfnsrsbh"  ng-blur="checkxhfnsrsbh($index)"/></td>
  26. <td class="edit"><input type="text"   ng-model="p.xhfnsrmc"/></td>  
  27. <td  class="edit" align="center" width="13%">
  28. <a class="sbtn sbtn01" ng-href="#"  ng-click="add()">增加</a> 
  29. <a class="sbtn sbtn03" ng-if="($index!=0)" ng-href="#" ng-click="del($index)">删除</a>
  30. </td>
  31. </tr>
  32. </table>

对于序号的显示,我们使用<td  align="center" class="title01"  ng-bind="p.xh=$index+1" /> 

既生成数据模型p.xh,同时又输出序号值到td的文本内容上



普通分类: