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 相关文章推荐
jquery 查找新建元素代码
Jul 06 Javascript
JS高级笔记
Jul 13 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
Vue异步组件使用详解
Apr 08 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 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
请离开include_once和require_once
2013/07/18 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
日期 时间js控件
2009/05/07 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
js闭包用法实例详解
2016/12/13 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
Python正则表达式介绍
2012/08/06 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
好的自荐信的要求
2013/10/30 职场文书
教师暑期培训感言
2014/08/15 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
人民检察院起诉书
2015/05/20 职场文书
欠条样本
2015/07/03 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android