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. 翻译：打造Edge渲染内核的浏览器

    最近开始了解UWP和Edge内核,在微软技术博客中找到一篇文章,主要是介绍Edge渲染内核使用技术.顺手翻译了一下.不对之处请斧正! Over the past several months, we ...

  2. Delete,Update与LEFT Join

    UPDATE:UPDATE A SET ApproverID=NULL FROM [SH_MaterialApplyBuyBill] A LEFT JOIN [SH_MaterialApplyBuyB ...

  3. LNMP平台搭建---PHP安装篇

    在前面三篇中,我们安装了Linux系统.Web服务器Nginx.MySQL数据库服务器,这篇就来将搭建动态网站的最后一步:PHP安装. Nginx服务器只能响应静态资源请求,对于动态资源请求就不行了, ...

  4. Socket通信原理探讨(C++为例)

    一.网络中进程之间如何通信? 本地的进程间通信(IPC)有很多种方式,但可以总结为下面4类: 1.消息传递(管道.FIFO.消息队列) 2.同步(互斥量.条件变量.读写锁.文件和写记录锁.信号量) 3 ...

  5. Android程序进行混淆，在导出签名apk包时出错！

    今天终于完成了近一个月的App开发工作,对程序进行混淆导出签名apk包时,却出现了如下的错误: Proguard returned with error code 1. See console Not ...

  6. js冒泡排序

    今天面试了家公司,最后要写个js的简单数组排序,很久都写不出来,好尴尬,随着语言的发展,这些简单方法越来越不被重视了... <html> <head> <script t ...

  7. 反射 + 抽象工厂模式切换DB数据源（附Demo）

    首先,设计模式的文章源自于程杰的<大话设计模式>这本书,这本书个人感觉很适合我,看着不累,能够安安心心的阅读学习.在这里十分感谢程杰的这本书,我博文中的例子会根据书上的例子来.为了不侵犯这 ...

  8. 享元模式/Flyweight模式/对象结构型/设计模式

    flyweight 享元模式(对象结构型) Flyweight在拳击比赛中指最轻量级,即"蝇量级"或"雨量级",这里选择使用"享元模式"的意 ...

  9. Spring--通过注解来配置bean【转】

    Spring通过注解配置bean 基于注解配置bean 基于注解来配置bean的属性在classpath中扫描组件 组件扫描(component scanning):Spring能够从classpat ...

  10. LightOJ1171 Knights in Chessboard (II)（二分图最大点独立集）

    题目 Source http://www.lightoj.com/volume_showproblem.php?problem=1171 Description Given an m x n ches ...