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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

点击按钮实现表格动态添加或删除一行

表格html   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名称测量范围不确定度证书编号有效期

使用js实现对table的动态添加、删除和更新

表格操作 body { font-size: 13px; line-height: 25px; } table { border-top: 1px solid #333;...

ViewPager+Fragment实现Tabhost,动态添加删除Fragment,可供第三方使用的类库

 效果图: 代码实现:ViewPager+Fragment实现了Tabhost,动态添加删除Fragment,暴露三个可重写的多态方法供第三方调用: protected Frag...

JavaScript实现动态添加,删除行

增加Table行     // Example: obj = findObj("image1"); function findObj(theObj, theDoc){  var p, i,...

使用JQueryUI + FreeMarker 实现Div动态DIalog添加和删除

 html> http-equiv="Content-Type" content="text/html; charset=utf-8"> http-equiv="Co...

Ztree树形菜单实现动态初始化、添加、删除、修改节点

Ztree树形菜单实现动态初始化、添加、删除、修改节点

jQuery实现动态向表中添加行和使用超链接删除行以及行之间颜色交替

jQuery实现动态向表中添加行和使用超链接删除行以及行之间颜色交替
  • lqwlb
  • lqwlb
  • 2014-12-09 10:31
  • 297

easyui datagrid实现批量添加、删除、修改,列多对多动态配比

最近用easyui做了个商城的简单商品管理,商品属性防淘宝店面后台属性添加功能,分析给大家一下部分Demo 效果: html代码: easyui datagrid实现批量...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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