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

　　

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

　　

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

Angular-表单动态添加删除的更多相关文章

  1. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  2. jQuery实现表单动态添加与删除数据操作示例

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

  3. 简单的jquery表单验证+添加+删除+全选/反选

    //布局 <body> <h4><a href="#">首页</a>><a href="#"> ...

  4. Angular 表单嵌套、动态表单

    说明: 组件使用了ng-zorro (https://ng.ant.design/docs/introduce/zh) 第一类:嵌套表单 1. 静态表单嵌套 demo.component.html & ...

  5. Jquery实现表单动态加减、ajax表单提交

    一直在搞Java后台开发,记得刚工作那一两年时间搞过前后端交互开发,用的东西也是五花八门,当时觉得做页面展示给别人看,是很有成就的事情,不过现在感觉自己跟纯前端开发比起来弱爆了,不过如果你的目标是作为 ...

  6. 深入了解Element Form表单动态验证问题 转载

    随风丶逆风 2020-04-03 15:36:41  2208  收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...

  7. angular.js ng-repeat动态插入删除dom节点

    既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...

  8. Angular 表单验证类库 ngx-validator 1.0 正式发布

    背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库  ngx-validator  ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...

  9. Angular表单 （一）表单简介

    Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...

随机推荐

  1. 3. UILable 的使用

    1.  坐标系 来自:http://www.cnblogs.com/mcj-coding/p/5100455.html  QQ: 863740091 如果在平面坐标系中我们要确定一个东西的位置和大小需 ...

  2. SpringMVC基本配置

    1 springmvc 框架 1.1  回顾mvc结构 1.2springmvc的介绍 是一个基于mvc的web层框架,使用spring的一个子项目 在使用springmvc的时候,不用单独和spri ...

  3. eclipse 搭建python环境

    1.安装eclipse + jdk windows下面就直接下载,双击安装就完了. Linux下: 安装eclipse: 安装完之后,可直接运行eclipse: 快捷方式在: 安装jidk:   2. ...

  4. scala安装

    一:在官网下载相应的版本http://www.scala-lang.org/download/2.10.6.html 二,在linux中解压下载下来的scala包   三:配置环境变量 export ...

  5. Datatables JQuery插件

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...

  6. testdb11b root.sh执行结果

    [root@testdb11b dev]# /u01/app//grid/root.sh Performing root user operation for Oracle 11g The follo ...

  7. Nginx负载均衡

    负载均衡(做分发服器)1.基于浏览器的分发基于浏览器的分发,按照在不同平台的浏览器请求进行分发,比如手机浏览器讲究资源小速度快节省流量,所以将自手机浏览器的请求分发到专供处理移动平台的web服务器上, ...

  8. 用C#通过正则表达式截取字符串中符合条件的子字符串

    仅仅作为简单的记录,不多说直接上代码(仅测试使用): private void Test() { Regex ConnoteA = new Regex("^[a-zA-Z]\\d{8}$&q ...

  9. threadid=1: thread exiting with uncaught exception (group=0xb2a86d70)

    这个错误是程序运行成功,但是一在虚拟机上运行就报“停止运行了”,如图: 然后我们查看一个日志信息: 查了好久,终于 搞好了,原因是安卓目标SDK版本太高了,我这里创建好默认是这样的如图: 只要把21改 ...

  10. 《DSP using MATLAB》示例Example5.7

    代码: x = [1, 1, 1, 1, zeros(1,4)]; N = 8; % zero-padding operation X_DFT = dft(x,N); % DFT of x(n) ma ...