angular動態(tài)刪除ng-repaeat添加的dom節(jié)點的方法
本文介紹了angular動態(tài)刪除ng-repaeat添加的dom節(jié)點的方法,分享給大家供大家參考,具體如下:
通過點擊刪除按鈕刪除數(shù)據(jù)庫信息以及當前行

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">專業(yè)</th>
<th>
<i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>
工作時間
</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ù)組,刪除當前行
});
}
});
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Angular中使用Intersection Observer API實現(xiàn)無限滾動效果
這篇文章主要介紹了Angular中使用Intersection Observer API實現(xiàn)無限滾動,實現(xiàn)原理為 在data下面加一個loading元素 如果此元素進入視窗 則調用api獲取新的數(shù)據(jù)加到原來的數(shù)據(jù)里面,這時loading就會被新數(shù)據(jù)頂下去,感興趣的朋友一起看看吧2023-12-12
AngularJS 使用 UI Router 實現(xiàn)表單向導
這篇文章主要介紹了AngularJS 使用 UI Router 實現(xiàn)表單向導 的相關資料,需要的朋友可以參考下2016-01-01
AngularJS頁面訪問時出現(xiàn)頁面閃爍問題的解決
這篇文章主要介紹了AngularJS框架使用中出現(xiàn)頁面閃爍問題的解決方法,閃爍問題一般是初始化未加載完畢造成的,需要的朋友可以參考下2016-03-03
自定義Angular指令與jQuery實現(xiàn)的Bootstrap風格數(shù)據(jù)雙向綁定的單選與多選下拉框
這篇文章主要介紹了自定義Angular指令與jQuery實現(xiàn)的Bootstrap風格數(shù)據(jù)雙向綁定的單選與多選下拉框 的相關資料,需要的朋友可以參考下2015-12-12
解決ng-repeat產生的ng-model中取不到值的問題
今天小編就為大家分享一篇解決ng-repeat產生的ng-model中取不到值的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
詳解angularjs popup-table 彈出框表格指令
本篇文章主要介紹了angularjs popup-table 彈出框表格指令,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Angular.js中angular-ui-router的簡單實踐
本篇文章主要介紹了Angular.js中angular-ui-router的簡單實踐,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
angular動態(tài)刪除ng-repaeat添加的dom節(jié)點的方法
本篇文章主要介紹了angular動態(tài)刪除ng-repaeat添加的dom節(jié)點的方法,非常具有實用價值,需要的朋友可以參考下2017-07-07

