需求描述:
点击添加按钮,添加数据,表格(二维列表)内容动态更新
使用点:
1、动态更新新增内容:
$_scope.pagedResultInfo.list.push(saveDataDictionaryKey);
2、动态更新删除内容
$scope.pagedResultInfo.list.remove(data);
注意:是删除数组里面的对象,对象这个是在checkbox选择、取消时已处理好的。
伪代码示例如下:
jsp:
<table class="table table-bordered table-hover">
<thead>
<tr>
<td></td>
<td>字典</td>
<td>描述</td>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="data in pagedResultInfo.list">
<td data-ng-click="ckEvent(this,'{{data.id}}');">
<label>
<input type="checkbox" name="ckdict" data-ng-checked="isSelected(data.id)" >
</label>
</td>
<td data-ng-click="queryValuePagedResult('{{data.id}}');"><a href="#">{{data.name}}</a></td>
<td>{{data.description}}</td>
</tr>
</tbody>
</table>
js:
/**
* checkbox事件
*/
var ckvalues=[];
var datas=[];//方便移除数据使用
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val)
return i;
}
return -1;
};
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
$scope.ckEvent=function($event, id){
$scope.isSelected = function(id){
return ckvalues.indexOf(id)!=-1;
}
if(ckvalues.indexOf(id)>=0){
ckvalues.remove(id);
datas.remove($event.data);
}else{
ckvalues.push(id);
datas.push($event.data);
}
// console.log(ckvalues);
// console.log(datas);
}
var $_scope = $scope;//以为新增方法里有个$scope,所以重新定义个名字,用来处理动态增加的数据,
/**
* 新增视图
*/
$scope.addView = function(id) {
$modal.open({
templateUrl : urlManager.$staticViewUrls.$getUrl( 'static/basis/html/data/add-key-view' ),
backdrop : 'false',
controller : ['$scope','$state', '$modalInstance','DataDictionaryKeyService', function($scope,$state,$modalInstance,dataDictionaryKeyService) {
$scope.saveOne = function(saveDataDictionaryKey) {
$scope.isSaveSuccess = false;
dataDictionaryKeyService.saveOne( saveDataDictionaryKey ).success( function(responseData) {
$scope.isSaveSuccess = true;
$modalInstance.dismiss( 'cancel' );
saveDataDictionaryKey.id=responseData.moreData.data;//添加这个否则checkbox的id是空,功能不能使用
$_scope.pagedResultInfo.list.push(saveDataDictionaryKey);
} );
}
$scope.closeView = function() {
$modalInstance.dismiss( 'cancel' );
}
}],
});
/**
* 删除
*/
$scope.deleteOne = function(id) {
// messages.confirm( {
// title : '删除操作',
// message : '确定要删除信息吗?'
// } ).ok( function() {
// var objids=ckvalues;
// angular.forEach(objids, function(objid) {
// dataDictionaryKeyService.deleteOne(objid.id);
// });
// } );
// dataDictionaryKeyService.deleteOne(ckvalues[0]);
var objids=ckvalues;
angular.forEach(objids, function(objid) {
var a=dataDictionaryKeyService.deleteOne(objid);//
});
angular.forEach(datas, function(data) {
$scope.pagedResultInfo.list.remove(data);
});
ckvalues=[];
datas=[];
}
}