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. （iOS逆向工程）class-dump 安装与使用

    class-dump,是可以把OC运行时的声明的信息导出来的工具.说白了,就是可以导出.h文件.用class-dump可以把未经加密的app的头文件导出来.废话不多说.class-dump的下载地址是 ...

  2. NSString 初始化方法的内存比较

    NSString *str1 = @"hello"; NSString *str2 = @"hello"; NSString *str3 = [NSString ...

  3. manven搭建和ssm的整合（转）

    原文:http://www.cnblogs.com/youzhibing/p/5004619.html 这是个很好的帖子,但是原文的maven搭建上有点问题. 帖子后面有说,其实不用配环境变量也是可以 ...

  4. iOS - 使用自定义字体-苹方字体

    苹方提供了六个字重,font-family 定义如下:苹方-简 常规体font-family: PingFangSC-Regular, sans-serif;苹方-简 极细体font-family: ...

  5. [BI项目记]-搭建代码管理环境之签入代码

    此篇主要介绍如何基于TFS环境创建进行BI项目最简单的代码签入和签出工作. 首先介绍BI项目中的SSAS项目.SSAS项目主要包含Cube多维数据集和数据挖掘模型,是在微软BI产品体系中重要的一个组件 ...

  6. InnoDB VS MyISAM

    首先都是MySql存储引擎.数据库的考虑点一般就是事务(ACID),然后牵扯出的锁机制.如果你需要事务,那就只能选InnoDB了.如果你还需要外键约束,你也只能选择InnoDB.这个是两者最大的区别. ...

  7. [linux] grep awk sort uniq学习

    grep的-A-B-选项详解grep能找出带有关键字的行,但是工作中有时需要找出该行前后的行,下面是解释1. grep -A1 keyword filename找出filename中带有keyword ...

  8. Nginx二级域名及多Server反向代理配置

    Nginx强大的正则表达式支持,可以使server_name的配置变得很灵活,如果你要做多用户博客,那么每个用户拥有自己的二级域名也就很容易实现了. 注:nginx反向代理同一ip多个域名,给head ...

  9. 近半年MVC使用后的一些习惯

    半年前接新项目, 来了一个前端, 由于只有我前后台都会, 就做业务层+辅助前端显示, 于是我决定使用MVC 上面那句无关紧要的话让我改了好多遍, 转载请注明出处: http://www.cnblogs ...

  10. ACM: SCU 4440 Rectangle - 暴力

     SCU 4440 Rectangle Time Limit:0MS     Memory Limit:0KB     64bit IO Format:%lld & %llu  Practic ...