这次来些稍微复杂点的功能需求:
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>