angular动态删除ng-repaeat添加的dom节点的方法


Posted in Javascript onJuly 20, 2017

本文介绍了angular动态删除ng-repaeat添加的dom节点的方法,分享给大家供大家参考,具体如下:

通过点击删除按钮删除数据库信息以及当前行

angular动态删除ng-repaeat添加的dom节点的方法

html代码如下:

<div class="row">
  <div class="col-xs-12">
    <!-- PAGE CONTENT BEGINS -->
    <div class="row">
      <div class="col-xs-12">
        <table id="simple-table" class="table table-bordered table-hover">
          <thead>
          <tr>
            <th>姓名</th>
            <th>学历</th>
            <th class="hidden-480">专业</th>

            <th>
              <i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>
              工作时间
            </th>
            <th class="hidden-480">工作经历</th>

            <th></th>
          </tr>
          </thead>

          <tbody>
          <tr ng-repeat="x in jl" class="hang">//通过ng-repeat迭代创建dom
            <td>
              <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{x.name}}</a>
            </td>
            <td>{{x.education}}</td>
            <td class="hidden-480">{{x.major}}</td>
            <td>{{x.workYear+'年'}}</td>

            <td class="hidden-480">
              {{x.workExperience}}
            </td>

            <td>
              <div class="hidden-sm hidden-xs btn-group">
                <button class="btn btn-xs btn-success">
                  <i class="ace-icon fa fa-check bigger-120"></i>
                </button>

                <button class="btn btn-xs btn-info">
                  <i class="ace-icon fa fa-pencil bigger-120"></i>
                </button>

                <button class="btn btn-xs btn-danger" ng-click="_delete($index)">
                  <i class="ace-icon fa fa-trash-o bigger-120"></i>
                </button>

                <button class="btn btn-xs btn-warning">
                  <i class="ace-icon fa fa-flag bigger-120"></i>
                </button>
              </div>

              <div class="hidden-md hidden-lg">
                <div class="inline pos-rel">
                  <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                    <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                  </button>

                  <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                    <li>
                      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip-info" data-rel="tooltip" title="View">
                                      <span class="blue">
                                        <i class="ace-icon fa fa-search-plus bigger-120"></i>
                                      </span>
                      </a>
                    </li>

                    <li>
                      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip-success" data-rel="tooltip" title="Edit">
                                      <span class="green">
                                        <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                      </span>
                      </a>
                    </li>

                    <li>
                      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip-error" data-rel="tooltip" title="Delete">
                                      <span class="red">
                                        <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                      </span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div><!-- /.span -->
    </div><!-- /.row -->

    <!-- PAGE CONTENT ENDS -->
  </div><!-- /.col -->
</div>
<!-- /.row -->

js代码如下:

angular.controller('tables',function ($scope,$http) {
  $http({
    method: 'GET',
    url:'resumes/myResume/'+USER.id
  }).then(function success(rep) {
    $scope.jl=rep.data;
  });

  $scope._delete=function (idx) {
    $scope.id=$scope.jl[idx].id;
    $http({
      method:'DELETE',
      url:'resumes/'+$scope.id
    }).then(function success(rep) {
      $scope.jl.splice(idx, 1);//截取数组,删除当前行
    });
  }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
KnockoutJs快速入门教程
May 16 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
Javascript继承机制详解
May 30 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
react如何快速设置文件路径别名
Apr 28 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 #Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 #Javascript
关于webpack代码拆分的解析
Jul 20 #Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 #Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 #Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 #Javascript
通过命令行创建vue项目的方法
Jul 20 #Javascript
You might like
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
详解JavaScript中的this指向问题
2021/02/05 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python 控制终端输出文字的实例
2019/07/12 Python
django+echart数据动态显示的例子
2019/08/12 Python
python实现代码统计器
2019/09/19 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
升职演讲稿范文
2014/05/23 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
龙猫观后感
2015/06/09 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
化工生产实习心得体会
2016/01/22 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Java存储没有重复元素的数组
2022/04/29 Java/Android