快捷導(dǎo)航

angular動(dòng)態(tài)刪除ng-repaeat添加的dom節(jié)點(diǎn)的方法

更新時(shí)間：2017年07月20日 15:33:34 作者：HellowWorldZz

本篇文章主要介紹了angular動(dòng)態(tài)刪除ng-repaeat添加的dom節(jié)點(diǎn)的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

本文介紹了angular動(dòng)態(tài)刪除ng-repaeat添加的dom節(jié)點(diǎn)的方法，分享給大家供大家參考，具體如下：

通過點(diǎn)擊刪除按鈕刪除數(shù)據(jù)庫信息以及當(dāng)前行

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>學(xué)歷</th>
            <th class="hidden-480">專業(yè)</th>

            <th>
              <i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>
              工作時(shí)間
            </th>
            <th class="hidden-480">工作經(jīng)歷</th>

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

          <tbody>
          <tr ng-repeat="x in jl" class="hang">//通過ng-repeat迭代創(chuàng)建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);//截取數(shù)組，刪除當(dāng)前行
    });
  }
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angular中使用Intersection Observer API實(shí)現(xiàn)無限滾動(dòng)效果
這篇文章主要介紹了Angular中使用Intersection Observer API實(shí)現(xiàn)無限滾動(dòng),實(shí)現(xiàn)原理為在data下面加一個(gè)loading元素如果此元素進(jìn)入視窗則調(diào)用api獲取新的數(shù)據(jù)加到原來的數(shù)據(jù)里面,這時(shí)loading就會(huì)被新數(shù)據(jù)頂下去,感興趣的朋友一起看看吧
2023-12-12
Angular2 PrimeNG分頁模塊學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了Angular2 PrimeNG分頁模塊學(xué)習(xí)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
這篇文章主要介紹了AngularJS 使用 UI Router 實(shí)現(xiàn)表單向?qū)?的相關(guān)資料,需要的朋友可以參考下
2016-01-01