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>