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