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

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

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

HTML代码如下:

rush:xhtml;">

姓名 学历

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

        <th></th>
      </tr&gt;
      </thead>

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

        <td class="hidden-480"&gt;
          {{x.workExperience}}
        </td&gt;

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

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

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

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

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

              <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close"&gt;
                <li>
                  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip-info" data-rel="tooltip" title="View"&gt;
                                  <span class="blue"&gt;
                                    <i class="ace-icon fa fa-search-plus bigger-120"&gt;</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"&gt;
                                  <span class="green"&gt;
                                    <i class="ace-icon fa fa-pencil-square-o bigger-120"&gt;</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"&gt;
                                  <span class="red"&gt;
                                    <i class="ace-icon fa fa-trash-o bigger-120"&gt;</i>
                                  </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </td&gt;
      </tr&gt;
      </tbody>
    </table&gt;
  </div><!-- /.span -->
</div><!-- /.row -->

<!-- PAGE CONTENT ENDS -->

js代码如下:

rush: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);//截取数组，删除当前行
});
}
});

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