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

一时失言乱红尘 2022-08-05 08:23 57阅读 0赞

![Center][]

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

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

![Center 1][]

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

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

![Center 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>

[Center]: /images/20220731/e02c1bc5c6554ceea462d65e038d37dc.png
[Center 1]: /images/20220731/5fd60bfdfe4d48e6a9f82d2731a21bdd.png
[Center 2]: /images/20220731/a7868c968bf34b0c96b4732136c44a9a.png