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

 更新时间:2017年07月20日 15:33:34   作者:HellowWorldZz  
本篇文章主要介绍了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);//截取数组,删除当前行
    });
  }
});

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

相关文章

  • Angular中使用响应式表单的详细步骤

    Angular中使用响应式表单的详细步骤

    Angular提供了两种处理表单的方式模板驱动表单和响应式表单(也称为模型驱动表单),使用模板驱动表单时,模板指令被用来构建表单的内部表示,在本文中,您探讨了如何将响应式表单应用于一个示例 Angular 应用程序
    2024-02-02
  • 详解Angular 中 ngOnInit 和 constructor 使用场景

    详解Angular 中 ngOnInit 和 constructor 使用场景

    最初学习Angular的时候总是搞不清楚ngOnInit和constructor的区别,现在我们来稍微理一下两者之间的区别。
    2017-06-06
  • angular十大常见问题

    angular十大常见问题

    本文主要介绍了angular十大常见问题,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Angular使用动态加载组件方法实现Dialog的示例

    Angular使用动态加载组件方法实现Dialog的示例

    这篇文章主要介绍了Angular使用动态加载组件方法实现Dialog的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 详解Angular5路由传值方式及其相关问题

    详解Angular5路由传值方式及其相关问题

    这篇文章主要介绍了详解Angular5路由传值方式及其相关问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 详解Webstorm 下的Angular2.0开发之路(图文)

    详解Webstorm 下的Angular2.0开发之路(图文)

    这篇文章主要介绍了详解Webstorm 下的Angular2.0开发之路(图文) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 详解Angular 4 表单快速入门

    详解Angular 4 表单快速入门

    本篇文章主要介绍了详解Angular 4 表单快速入门,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJS实现的省市二级联动功能示例【可对选项实现增删】

    AngularJS实现的省市二级联动功能示例【可对选项实现增删】

    这篇文章主要介绍了AngularJS实现的省市二级联动功能,涉及事件监听、响应及页面元素动态操作相关技巧,此外还具备对选项进行增删的功能,需要的朋友可以参考下
    2017-10-10
  • Angular4学习教程之DOM属性绑定详解

    Angular4学习教程之DOM属性绑定详解

    这篇文章主要给大家介绍了关于Angular4学习教程之DOM属性绑定的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • Angular学习笔记之angular的$filter服务浅析

    Angular学习笔记之angular的$filter服务浅析

    本文是小编记录的angular学习笔记,通过本文首先给大家介绍了$filter服务,然后介绍下内置filter及filter的简单使用,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-11-11

最新评论