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指令既可以绑定已有的变量，也可以生成数据模型，即如果 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-bind、ng-value和ng-model相关推荐

ng bind html 无效,angularjs中ng-bind-html的用法总结
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件) 要学习这个服务,先要了解另一个指令: n ...
ng bind html 无效,ng-bind-html中自定义的指令不生效！
慕的地10843 当然无法生效,ng-bind-html 等同于 innerHTML.可以自定义一个类似 ng-bind-html-compile 的指令:.directive('bindHtmlCo ...
ng build command not found(ng命令到底是什么鬼)
为了编译坑爹的flink,猜了好久,这个ng到底是什么鬼? 从apt install ng-common到nginx都不是最后发现原来是Angular的命令 sudo npm install -g ...
GCTA学习3 | GCTA的两篇NG：fast-LMM和fast-GLMM
本节,介绍一下官网上面GCTA的功能描述. 1. 最新功能 GCTA在2010年首次释放,现在的版本是1.94.0beta,2021年到现在更新了3次,重要的更新时增加了fastGWA.fastGWA ...
ng命令汇总：Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Ang ...
必须正确理解的---ng指令中的compile与link函数解析
这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...
Angular应用ng build的一些边界情况boundary condition
ng build报错:no projects support the build target 究其原因,发现angular.json architect里的build被改成build2了: 直接用n ...
NG Command（命令）
创建项目 ng new 项目名称创建带路由 ng new 项目名称 --routing 启动项目 ng serve -open 简写 ng serve -o 创建模块 ng g module Mod ...
tesstwo深度优化_十年磨一剑：自主可控国产微观交通仿真软件TESS NG研发之路
编者按:到目前为止,国内微观交通仿真单位用户已超1000家,主要应用的软件包括德国的VISSIM.SUMO,西班牙的AIMSUN, 美国的TransModeler.SimTraffic,英国的Para ...
[译]ng指令中的compile与link函数解析转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

ng-bind、ng-value和ng-model

ng-bind、ng-value和ng-model相关推荐

最新文章

热门文章