ngRepeat实现动态添加删除

最新推荐文章于 2020-07-18 17:01:36 发布

u010029979

最新推荐文章于 2020-07-18 17:01:36 发布

阅读量657

点赞数

分类专栏： angularJS

本文链接：https://blog.csdn.net/u010029979/article/details/51550273

版权

angularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

u010029979

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ngRepeat实现动态添加删除

<!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;
复制链接

扫一扫