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

偏执的太偏执、 2022-08-05 08:23 36阅读 0赞

首先说明一下功能需求：

当点击一次增加按钮的时候，下方就会多一行输入框；

当点击一次删除按钮的时候，所点击的删除按钮那行的输入框会消失；

当点击打印信息按钮的时候，把所有输入框中的数据读取出来，并打印到控制台上。

由此可看出，带有删除按钮的这部分DIV是动态的。

现在使用的是angularjs框架，那我们该如何去实现这样的功能呢？

angularjs有个很强大的功能，那就是双向数据绑定；

由此可以知道，我们就是要使用双向数据绑定的特性来实现它。

思路是这样的：

通过维护数组的方式来实现。

首先在angular控制器中创建一个数组，像这样：

$scope.showVBs = \[\];

当点击一次增加按钮的时候，就执行一次下方的方法：

$scope.BDetailsAdd = function(){
    	$scope.showVBs.push({});
    }

当点击一次删除按钮的时候，就执行一次下方的方法：

$scope.BDetailsAdd = function(Count){
    	$scope.showVBs.splice(Count, 1);
    }

当点击一次打印按钮的时候，就执行一次下方的方法:

通过遍历数组，取出里面的值

<p><span style="font-family: 'Anonymous Pro';"><span style="font-size:12px;">$scope.printInfo = function () {</span></span></p><pre name="code" class="html"><span style="font-size:12px;">        for (var i = 0; i < $scope.showVBs.length; i++) {
                console.log($scope.showVBs[i]);
            }
        };</span>

html的代码如下：

<div class="row  panel panel-default panel-body">
        <div class="col-md-offset-1 panel panel-default">
            <label>{
       {'Details'}}</label>
            <input type="button" class="btn btn-info" value="增加" ng-click="BDetailsAdd()">
            <input type="button" class="btn btn-danger" value="打印信息" ng-click="printInfo()">
        </div>
        <div class="vBaggages" ng-repeat="vba in showVBs">
            <div class="form-group col-md-2 col-md-offset-1">
                <input type="button" class="btn btn-info" value="删" ng-click="BDetailsDel($index)">
                <input type="text" class="form-control pull-right" ng-model="vba.Tag"
                       placeholder="Tag" style="width:70%">
            </div>
            <div class="form-group col-md-2 col-md-offset-1">
                <input type="text" class="form-control pull-right" ng-model="vba.NO"
                       placeholder="No.">
            </div>
            <div class="form-group col-md-5 col-md-offset-1">
                <input type="text" class="form-control pull-right" ng-model="vba.remarks"
                       placeholder="Remarks">
            </div>
        </div>
    </div>

完整的源码：

<!docype html>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html ng-app="App">
    <head>
        <title>index</title>
        <link rel="stylesheet" href="script/bootstrap/css/bootstrap.min.css">
        <script type="text/javascript" src="script/angular/angular.min.js"></script>
        <script type="text/javascript" src="script/app/appCtrl.js"></script>
    </head>
    <body ng-controller="EditCtrl">
    
    <form role="form" name="editForm">
        <div class="row">
            <div class="col-md-12">
                <div class="row  panel panel-default panel-body">
                    <div class="col-md-offset-1 panel panel-default">
                        <label>{
       {'Details'}}</label>
                        <input type="button" class="btn btn-info" value="增加" ng-click="BDetailsAdd()">
                        <input type="button" class="btn btn-danger" value="打印信息" ng-click="printInfo()">
                    </div>
                    <div class="vBaggages" ng-repeat="vba in showVBs">
                        <div class="form-group col-md-2 col-md-offset-1">
                            <input type="button" class="btn btn-info" value="删" ng-click="BDetailsDel($index)">
                            <input type="text" class="form-control pull-right" ng-model="vba.Tag"
                                   placeholder="Tag" style="width:70%">
                        </div>
                        <div class="form-group col-md-2 col-md-offset-1">
                            <input type="text" class="form-control pull-right" ng-model="vba.NO"
                                   placeholder="No.">
                        </div>
                        <div class="form-group col-md-5 col-md-offset-1">
                            <input type="text" class="form-control pull-right" ng-model="vba.remarks"
                                   placeholder="Remarks">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    </body>

</pre><pre name="code" class="html">/**
     * Created by wzs on 2015/9/6 0006.
     */
    var App = angular.module('App', [])
    App.controller('EditCtrl', ['$scope', function ($scope) {
        //================测试代码段================
        $scope.printInfo = function () {
            for (var i = 0; i < $scope.showVBs.length; i++) {
                console.log($scope.showVBs[i]);
            }
        };
    
        $scope.showVBs = [{
            "Tag": "Tag1",
            "NO": "No1",
            "remarks": "remarks1"
        }, {
            "Tag": "Tag2",
            "NO": "No2",
            "remarks": "remarks2"
        }];
        $scope.BDetailsAdd = function () {
            $scope.showVBs.push({});
        };
        $scope.BDetailsDel = function (Count) {
            $scope.showVBs.splice(Count, 1);
        };