ngRepeat实现动态添加删除

原创 2016年05月31日 23:39:16
<!DOCTYPE html>
<html ng-app="">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .border{border: 1px solid #ccc;width: 100px;height: 100px;float: left;}
        </style>
        <script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body ng-controller="con">
        <input type="text" name="" id="" value="" />
        <button ng-click="add()">添加</button>
        <div ng-repeat="item in list track by $index">
            <div class="border">{{item.age}}</div>
            <div class="border">{{item.name}}</div>
            <div ng-click="del(item.id)">删除</div>
        </div>
    </body>
    <script type="text/javascript">
        var con = function($scope){
            $scope.list=[];
            var id=0;
            var age=0;
            var sr ={age:'',name:'',id:id}
            $scope.add = function(){
                id++;
                age++;
                sr ={age:age,name:'',id:id}
                $scope.list.push(sr);
                console.log($scope.list)
            }
            $scope.del = function(dd){
                $scope.list.forEach(function(item,key){
                    console.log(dd)
                    if(item.id==dd){
                        $scope.list.splice(key,1);
                        console.log(key)
                    }
                })
            }
        }

    </script>
</html>

Js实现动态插入删除文本框

Untitled Document var qus = new Array(); function Question() { this.qno = qus.lengt...
  • myinc
  • myinc
  • 2014年11月10日 15:36
  • 624

jquery实现动态添加和删除表格

无标题文档 $(document).ready(function (){ $("#submit").click(function (){ //先获取文本框的值 var $name=...
  • HUMHSX
  • HUMHSX
  • 2012年03月22日 21:07
  • 5583

angularjs Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.8/ngRepeat/dupes?

出现这个错误的原因是如果页面中使用了ng-repeat,angularjs默认是根据里面的内容判断是否相同的,如果里面出现相同的内容就会报错,这里要注意的是,比如如下的内容 ng-repeat="us...
  • u014520745
  • u014520745
  • 2016年11月22日 23:55
  • 1484

如何在深层嵌套ngRepeat中获取不同层级的$index

var appData = [ { name: 'C++从入门到放弃', author: 'dreamappl...
  • Sensation_cyq
  • Sensation_cyq
  • 2016年08月31日 19:03
  • 2009

javascript实现动态添加和删除文件上传选项

利用javascript来实现:
  • damogu_arthur
  • damogu_arthur
  • 2014年11月14日 10:36
  • 1247

angularjs[ngRepeat:dupes]

最近在开发过程中,发现一个问题,在使用angularjs的ng-repeat遍历过程中,如果遍历的数组中包含相同的项,则会抛错。 如下例: 测试 ...
  • ligang2585116
  • ligang2585116
  • 2016年01月09日 23:11
  • 6508

jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能(二)

接着上一篇 jQuery + JavaScript 实现的动态添加文本框功能(一) 来说。首先看一下效果图: 1,jQuery实现的动态添加文本框和动态删除文本框的功能-1-操...
  • reggergdsg
  • reggergdsg
  • 2016年01月15日 14:24
  • 3003

js动态添加类,移除类。toggclass

更多 function doAct(s){     var t = document.getElementById('t'),     c = s.className;     //有more属性 ...
  • webZRH
  • webZRH
  • 2017年04月19日 19:31
  • 679

ng-repeat报错

报错信息angular.min.js:sourcemap:118 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.8/ngRepeat/...
  • kingov
  • kingov
  • 2017年06月15日 11:47
  • 164

动态的添加、删除表单

在写简历时,有一项实习经历,如果没有就不填,如果有就实习经历,有多少写多少。 这个功能是如何实现的,其实很简单,以bootstrap和jquery为例:具体代码实现: ...
  • change_on
  • change_on
  • 2017年04月12日 17:56
  • 1466
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ngRepeat实现动态添加删除
举报原因:
原因补充:

(最多只允许输入30个字)