第13篇：Angular-表单动态添加删除

来源：互联网发布：lol徐老师的淘宝店网址编辑：程序博客网时间：2024/05/21 17:28

原文：http://webserver.300364.net/show/11019444150761540564.html

angular本身不允许去操作DOM，在angular的角度来说，所有操作都以数据为核心，剩下的事情由angular来完成。所以说，想清楚问题的根源，解决起来也不是那么困难。
　　前提
　　那么，要做的这个添加删除要具有以下功能：
　　　　1、当数据只剩一条时，不允许删除；
　　　　2、第一条数据不允许修改和删除；
　　　　3、可以动态设置添加最大条数（例中设置为4条）。
　　首先，用bootstrap布局一个可以添加和删除的操作界面：

<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);    };});

当然，这只是一个简单的输入例子，并没有做诸如输入框必填等功能。

阅读全文

0 0