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>

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

使用 ngRepeat 指令的时候,我们一般会通过 $index 获取当前层级的每一项循环的索引,但是当我们循环出来的数据中还有数组(数组A)需要我们循环的话,我们还是会使用 ngRepeat 来循环...

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

var appData = [ { name: 'C++从入门到放弃', author: 'dreamappl...

js动态添加行和删除行

  • 2016年08月24日 16:17
  • 259KB
  • 下载

js动态添加删除表格

  • 2014年09月02日 10:44
  • 7KB
  • 下载

Html+js实现表格可编辑,并能动态添加删除行

功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容。 点击增加行,在table的末尾增加一行;点击删除行,删除table中最末尾的一行。       ...

Android中ListView动态添加删除项

  • 2012年04月13日 00:40
  • 70KB
  • 下载

实现动态的文件上传操作按钮的添加和删除

jquery文件上传                   var addMore = function() {                 var div = document.getElemen...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ngRepeat实现动态添加删除
举报原因:
原因补充:

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