Angular-表单动态添加删除

时间 2019-11-25

标签 angular 表单动态添加删除栏目 AngularJS 繁體版

原文原文链接

　　angular自己不容许去操做DOM，在angular的角度来讲，全部操做都以数据为核心，剩下的事情由angular来完成。因此说，想清楚问题的根源，解决起来也不是那么困难。javascript

　　前提

　　那么，要作的这个添加删除要具备如下功能：html

　　　　一、当数据只剩一条时，不容许删除；java

　　　　二、第一条数据不容许修改和删除；bootstrap

　　　　三、能够动态设置添加最大条数（例中设置为4条）。app

　　首先，用bootstrap布局一个能够添加和删除的操做界面：dom

<body ng-app="App">
    <form class="form-horizontal" ng-controller="index">
        <label class="col-sm-2 control-label">绑定域名:</label>
        <div class="col-sm-10">
            <div ng-repeat="domain in info.operate">
                <div class="form-group">
                    <label class="control-label col-sm-1" for="domain{{$index + 1}}">域名{{$index + 1}}</label>
                    <div class="col-sm-9">
                        <input type="text"
                               id="domain{{$index + 1}}"
                               class="form-control"
                               ng-model="domain.value"
                               name="domain{{$index + 1}}"
                               ng-disabled="!$index" />
                    </div>
                    <div class="col-sm-2">
                        <button class="btn btn-default"
                                type="button"
                                ng-disabled="info.operate.length >= 4"
                                ng-click="info.add($index)">+</button>
                        <button class="btn btn-default"
                                type="button"
                                ng-click="info.delete($index)"
                                ng-show="$index">-</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-offset-3"><button type="button" class="btn btn-primary" ng-click="info.result()">结果</button></div>
    </form>
</body>

　　而后，须要的是用angular操做数据完成以上功能：布局

var app = angular.module('App', []);
app.controller('index', function($scope, $log) {
    $scope.info = {};
    $scope.info.operate = [];
    // 假设这是数据来源
    var simp = ["www.baidu.com"];
    angular.forEach(simp, function(data, index) {
        $scope.info.operate.push({key: index, value: data});
    });
    // 增长
    $scope.info.add = function($index) {
        $scope.info.operate.splice($index + 1, 0, {key: $index + 1, value: ""});
    };
    // 删除
    $scope.info.delete = function($index) {
        $scope.info.operate.splice($index, 1);
    };
    // 结果
    $scope.info.result = function() {
        var result = [];
        angular.forEach($scope.info.operate, function(data) {
            result.push(data.value);
        });
        $log.debug(result);
    };
});

　　至此，功能编写完毕，具体效果如图：spa

　　固然，这只是一个简单的输入例子，并无作诸如输入框必填等功能。debug