AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定（二）

这次来些稍微复杂点的功能需求：

1、在info旁边的输入框中输入数字，根据数字的多少来动态显示这部分输入框；

其中，check部分的输入框初始是没有的（当然，也可以有！）；

2、每点击一次增加按钮，下方就出现一行输入框；

3、当点击删除按钮，即删除对应行的输入框；

4、点击打印按钮，收集所有数据，并打印到控制台中；

===========================================================================

实现的思路：

也是通过维护数组的方式来实现！

1、双向数据绑定info的输入框，并给这个输入框配上ng-change。表示，当输入框的值发生变化后，去执行指定的方法；

注：

a、angularjs中貌似没有直接遍历数字的方法，所以要自己写一个数字转数组的方法；

b、当数字由大变小时，一次删除数组后方的数；当数字由小变大的时候，不要直接清空数组，这样就避免之前输入的信息得到保留；

2、info下方的DIV就是通过遍历这个数组来实现增删功能；

3、所维护的数组具有一定格式的要求；

===========================================================================

代码的实现：

先建立一个空的数组：

$scope.InfoAttr = [];

编写数字转换数组的方法：

其中，还会根据数字的大小来显示图二中的div的个数；

$scope.num2attr = function () {var num = $scope.comInfos;if (angular.isNumber(num)) {var len = $scope.InfoAttr.length;if (num > len) {for (var i = 0; i < (num - len); i++) {$scope.InfoAttr.push({"cbaggages": []});}} else if (num < len) {for (var i = 0; i < (len - num); i++) {$scope.InfoAttr.pop();}}}}

注：其中这句要注意一下，就是我所说的格式；

$scope.InfoAttr.push({"cbaggages": []});

angular.isNumber(num)//判断传进来的是不是数字类型；

带删除按钮的输入框的增加和删除功能代码如下（跟cbaggages格式有关）：

$scope.cBDetailsAdd = function (index) {$scope.InfoAttr[index].cbaggages.push({});};$scope.cBDetailsDel = function (index, Count) {$scope.InfoAttr[index].cbaggages.splice(Count, 1);};

打印功能：

$scope.printInfo2 = function () {for (var i = 0; i < $scope.InfoAttr.length; i++) {console.log($scope.InfoAttr[i]);
<span style="white-space:pre"> </span>    for(var x = 0; x < $scope.InfoAttr[i].cbaggages.length; x++ ){console.log(<pre name="code" class="html">                $scope.InfoAttr[i].cbaggages[x]

)} } };
html代码的写法：

<div class="form-group  col-md-offset-1 panel panel-default"><label>{{'Info'}}</label><input type="number" maxlength="2" ng-model="comInfos" ng-change="num2attr()"/>//当输入框值变化后执行num2attr方法<input type="button" value="打印信息" ng-click="printInfo2()" class="btn btn-danger">//点击后执行打印方法</div><div ng-repeat="cInfo in InfoAttr" ng-init="cbaindex=$index">//遍历数组，cInfo取到的是对象本身而不是下标，$index才是下标<div><div class="form-group col-md-2 col-md-offset-1"><label>{{'cType'}}</label><input type="text" ng-model="cInfo.cType" class="form-control pull-right">//此处ng-model绑定的就是对象中cType属性</div><div class="form-group col-md-2 col-md-offset-1"><label>{{'cNo'}}</label><input type="text" ng-model="cInfo.cNo" class="form-control pull-right"></div><div class="form-group col-md-5 col-md-offset-1"><label>{{'cPNR'}}</label><input type="text" ng-model="cInfo.cPNR" class="form-control pull-right"></div><div><div class="col-md-offset-1"><label>{{'check'}}</label><input type="button" class="btn btn-info" value="增加" ng-click="cBDetailsAdd($index)">//点击一次，就执行一次该方法，并传入当前cInfo的下标值</div><div ng-repeat="param in cInfo.cbaggages">//这里就用到了num2attr中的格式了，遍历cbaggages中的子数组<div class="form-group col-md-2 col-md-offset-1"><input type="button" value="删" ng-click="cBDetailsDel(cbaindex, $index)" class="btn btn-danger">//点击删除的时候，将cInfo的下标和当前点击的删除按钮所在的子数组下标一并传出去<input type="text" ng-model="param.cTag" class="form-control pull-right"placeholder="cTag" style="width:70%"></div><div class="form-group col-md-2 col-md-offset-1"><input type="text" ng-model="param.cENO" class="form-control pull-right"placeholder="cENO"></div><div class="form-group col-md-5 col-md-offset-1"><input type="text" ng-model="param.cReak" class="form-control pull-right"placeholder="cReak"></div></div></div></div></div>

AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定（二）相关推荐

mvc中js是如何调用HTML的,MVC中javascript直接调用Model
最近做一个统计页面, Model从后台已经获取了数据集合,想直接在前台展示,而这个展示是需要用js生成图表的. 控制器部分代码: public ActionResult Index() { var m ...
Vue中从v-model，model，.sync到双向数据传递，再到双向数据绑定
前面的话虽然v-model和.sync之间的区别,是非常明显的,但是通过这个去研究下去,就有点意思了.首先说明v-model是.sync的一种特殊情况,也就是当prop是value,vm.$emit ...
走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
必须正确理解的---ng指令中的compile与link函数解析
这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...
[译]ng指令中的compile与link函数解析转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
python创建类的实例方法-Python中动态创建类实例的方法
简介在Java中我们可以通过反射来根据类名创建类实例,那么在Python我们怎么实现类似功能呢? 其实在Python有一个builtin函数import,我们可以使用这个函数来在运行时动态加载一些模 ...
在网页中动态的生成一个gif图片
作者: love.net 大家知道股票网站的K线图是动态生成的定时刷新PHP 就有动态生成图片的功能那么怎样用asp.net在网页中动态的生成一个图片呢? 下面我要举的例子是动态的生成一个图片显示当 ...
React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
用户控件中动态加入脚本引用
用户控件中动态加入脚本引用,添加前先判断是否已经有引用,没有才添加. //××××.ascx protected void Page_Load(object sender, EventArgs e){ ...

AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定（二）

AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定（二）相关推荐

最新文章

热门文章