ANGULARJS implementation of dynamic table deletion and addition

<div class= "wrap" ng-controller= "Viewcontroller" >

<div class= "Butgroup" >
<button type= "button" id= "AddData" class= "btn btn-success" ng-click= "AddData ()" >add data</button>
<button type= "button" id= "Removefirstrow" class= "btn btn-success" ng-click= "Removefirstrow ()" >remove first Row </button>
<button type= "button" id= "reset" class= "btn btn-success" ng-click= "Reset ()" >Reset</button>
</div>
<div id= "gridself" ui-grid= "gridoptions" class= "grid" Ui-grid-auto-resize ui-grid-pagination ui-grid-edit Ui-grid-row-edit Ui-grid-cellnav ui-grid-expandable ui-grid-selection></div>

</div>

The following are: Viewcontroller.js

' Use strict ';

/**
* View1
*/
MyApp
. Controller (
' Viewcontroller ',
[
' Viewservice ',
' $scope ',
' $http ',
' $interval ',
function (Viewservice, $scope, $http, $interval) {

$scope. showMe = function (data) {
Alert ("Show ID:" +data.id);
};

$scope. Editme = function (data) {
Alert ("Edit ID:" +data.id);
};

$scope. Approveme = function (data) {
Alert ("Approve ID:" +data.id);
};

$scope. gridoptions = {
Paginationpagesizes: [10, 20, 30, 40, 50],
Paginationpagesize:10,
Enablecolumnmenus:false,
Roweditwaitinterval:-1,
enablehorizontalscrollbar:0,
enableverticalscrollbar:0,
Useexternalpagination:true,
Useexternalsorting:true,
Expandablerowtemplate: ' html/view/subgrid.html ',
expandablerowheight:150,
Columndefs: [
{name: ' id ', enablecelledit:false},
{name: ' name ', Enablecelledit:false},
{name: ' filename ', displayName: ' File ', Width: ' 20% ', editablecelltemplate: ' Ui-grid/filechoosereditor ',
Editfilechoosercallback: $scope. StoreFile},
{
Name: ' File ',
Enablesorting:false,
CellTemplate: ' <input type= ' file ' name= ' file ' value= ' {{row.entity.id}} ' file-upload/> '
},
{
Name: ' t/f ',
Field: ' Display ',
Allowcellfocus:true,
Type: ' Boolean ',
Enablecelledit:true,
Enablehiding:false,
Enablecolumnmenu:false,
Width:50
},
{
Name: ' Operate ',
Enablesorting:false,
Enablecelledit:false,
Hide button
CellTemplate: ' <button ng-click= ' grid.appScope.showMe (row.entity) "> View </button><button ng-click=" Grid.appScope.editMe (row.entity) "> Edit </button><button ng-show=" Row.entity.name! = ' + "demo" + ' "ng-click= "Grid.appScope.approveMe (row.entity)" > Approvals </button> '
},
],
Onregisterapi:function (GRIDAPI) {
$scope. Gridapi = Gridapi;
$scope. gridApi.core.on.sortChanged ($scope, Function (grid, sortcolumns) {
if (sortcolumns.length! = 0) {
if (sortcolumns[0].sort.direction = = ' ASC ') $scope. Page.sortdirection = true;
if (sortcolumns[0].sort.direction = = ' desc ') $scope. Page.sortdirection = false;
$scope. page.sortcolumn = Sortcolumns[0].displayname;
Viewservice.querylist ($scope);
}
});
GridApi.pagination.on.paginationChanged ($scope, function (NewPage, pageSize) {
$scope. page.curpage = NewPage;
$scope. page.pagesize = pageSize;
Viewservice.querylist ($scope);
});
GridApi.selection.on.rowSelectionChanged ($scope, function (row) {
var msg = ' Row selected ' + row.isselected;
});

GridApi.selection.on.rowSelectionChangedBatch ($scope, function (rows) {
var msg = ' rows changed ' + rows.length;
});
GridApi.expandable.on.rowExpandedStateChanged ($scope, function (row) {
if (row.isexpanded) {
Row.entity.subGridOptions = {
Columndefs: [
{name: ' Name '},
{Name: ' Gender '},
{name: ' Company '}
]};

Row.entity.subGridOptions.data = [{
"Name": "AA",
"Gender": "Male",
"Company": "Info"
},{
"Name": "BB",
"Gender": "Male",
"Company": "Info"
}];

$http. Get ('/data/100.json ')
. Success (function (data) {
Row.entity.subGridOptions.data = data;
// });
}
});
}
};

Setting a row that meets the criteria will not be selected when all is selected
$scope. gridoptions.isrowselectable = function (row) {
if (Row.entity.name = = ' demo ') {//filter conditions are not selected to meet the criteria. Records that are used for auditing are not selected.
return false;
} else {
return true;
}
};

$scope. page = {
Curpage:1,
Pagesize:10,
SortColumn: ' id ',
Sortdirection:true
};

Viewservice.querylist ($scope);

$scope. AddData = function () {
var n = $scope. GridOptions.data.length + 1;
$scope. GridOptions.data.push ({
"id": N,
"Name": "Name" + N
});
};

$scope. Removefirstrow = function () {
if ($scope. gridOpts.data.length > 0) {
$scope. GridOptions.data.splice (0,1);
// }
};

$scope. reset = function () {
Viewservice.querylist ($scope);
};

$scope. Upload = function () {
var files = document.getelementsbyname (' file ');
for (Var i=0;i<files.length;i++) {
if (files[i].files! = null && files[i].files.length > 0) {
var id = files[i].defaultvalue;
var f = files[i].files[0];
$http ({
Method: ' POST ',
URL: ' File/upload ',
Headers: {
' Content-type ': undefined
},
Data: {
Id:id,
Filename:f,
Problemtype: ' 3 '
},
Transformrequest:function (data, Headersgetter) {
Let FormData = new FormData ();
Angular.foreach (data, function (value, key) {
Formdata.append (key, value);
});
return formData;
}
}). Success (function (data) {

});
}
}
$interval (function () {alert ("Upload finish!")}, 2000, 1);
};

FileUpload
$scope. files = [];
$scope. ids = [' 1 ', ' 2 '];

Listen for the file selected event
$scope. $on ("fileselected", Function (event, args) {
var flag = true;
$scope. $apply (function () {
if ($scope. files.length > 0) {
for (Var i=0;i< $scope. files.length;i++) {
if ($scope. files[i].name = = Args.file.name && $scope. files[i].size = = args.file.size) {
Flag = false;
}
}
}
if (flag) {
$scope. Files.push (Args.file);
}
});
});

$scope. DeleteFile = function (file) {
for (Var i=0;i< $scope. files.length;i++) {
if ($scope. files[i].name = = File.name && $scope. files[i].size = = file.size) {
$scope. Files.splice (i,1);
}
}
if ($scope. files.length = = 0) {
document.getElementById ("File"). Value = "";
}
};

The Save method
$scope. Save = function () {
$http ({
Method: ' POST ',
URL: "File/uploadlist",
Headers: {' Content-type ': undefined},
Data: {model: $scope. IDs, files: $scope. Files},
Transformrequest:function (data) {
var formData = new FormData ();
Formdata.append ("IDs", Angular.tojson (Data.model));
for (var i = 0; i < data.files.length; i++) {
Formdata.append ("Myfiles", Data.files[i]);
}
return formData;
}
}).
Success (function (data, status, headers, config) {
$scope. files = [];
$scope. ids = [];
document.getElementById ("File"). Value = "";
Alert (data+ "files upload success!");
}).
Error (function (data, status, headers, config) {
Alert ("failed!");
});
};
} ]);

ANGULARJS implementation of dynamic table deletion and addition