ng-bind、ng-value和ng-model

最新推荐文章于 2021-06-29 23:52:50 发布

zhifeng687

最新推荐文章于 2021-06-29 23:52:50 发布

阅读量3.6k

点赞数

分类专栏： angular.js

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

版权

angular.js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

在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的赋值表达式

<!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的文本内容上

zhifeng687

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ng-bind、ng-value和ng-model

在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指令既可以绑定已有的变量，也可以生成数据模型，即如果 sc...
复制链接

扫一扫

专栏目录