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. javascript的window.ActiveXObject对象，区别浏览器的方法

    (window.ActiveXObject)的作用,用来判断浏览器是否支持ActiveX控件,如果支持ActiveX控件,我们可以利用var xml=new ActiveXObject("M ...

  2. SpringMVC基本配置

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

  3. jquery ashx交互 返回list 循环json输入信息

    html代码:触发按钮 <input type="button" id="search" value="查询" /> ashx代 ...

  4. MySQL源码分析：源码文件结构及主要数据结构

    原文地址:http://blog.itpub.net/30186219/viewspace-1481125/BUILD: 内含在各个平台.各种编译器下进行编译的脚本.如compile-pentium- ...

  5. node.js grunt文件压缩

    对于前段来说,熟悉node的人其实还并不是太多,如果您想入门一门后端语言我建议还是从node入手最好. 我也是最近开始学习node,来谈谈近期对node的学习的心得. 提到node首先就是要安装一大堆 ...

  6. 计算机网络中的帧封装（C实现）

    这段时间开始复习计算机网络,看到帧封装这一节,结合以前的课程设计,就用C写了个帧封装的程序,说实话C学的确实不怎么样,实现的时候对于文件操作那部分查了好多资料,下面说说帧封装是啥情况. 学过计算机网络 ...

  7. php curl 例子

    get方式: set_time_limit(0);        $url ='http://xxxxxxxx?pwd=wJ2312&s=1&e=2&d=1&t=asc ...

  8. ubuntu 16.04 设置位wifi热点 方法（手机可链接）亲测可用

    Ubuntu16.04里面可以直接创建热点,而不用像以前的版本,还要其他辅助工具. 具体步骤如下: 1. 点击有上角网络标志,点开编辑链接. 2. 选择 WiFi ,添加一个网络. 3.设置这个网络 ...

  9. Oracle 11g RAC停止和启动步骤

    关闭前备份控制文件/参数文件:   sqlplus / as sysdba alter database backup controlfile to '/home/oracle/control.ctl ...

  10. WPF中Ribbon控件的使用

    这篇博客将分享如何在WPF程序中使用Ribbon控件.Ribbon可以很大的提高软件的便捷性. 上面截图使Outlook 2010的界面,在Home标签页中,将所属的Menu都平铺的布局,非常容易的可 ...