Can I know why that my add function is not working after I create edit function. Supposedly, user will enter the data and click on plus button icon to add the data into the table. The data will be add at beginning of array. But now, when user click on add(plus icon). The data will go to return 'edit'. I don't know how to ensure that the data will return to edit.
Here is my HTML,
<div class="col-md-12 content-maintenance">
<h3>
<strong>Project
</strong>
</h3>
<div class="input-group">
<input class="form-control" ng-model="filterproject" placeholder="filter" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-filter"></span> Filter
</span>
</div>
<br>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>PPMID</th>
<th>EPRID</th>
<th>Release ID</th>
<th>Project Name</th>
<th>Release Name</th>
<th>Application Name</th>
<th>Action</th>
</tr>
<tr>
<th>
<input class="form-control" ng-model="PPMID" id="ppmid" type="number" min="1" placeholder="PPMID">
</th>
<th>
<input class="form-control" ng-model="EPRID" id="eprid" type="number" min="1" placeholder="EPRID">
</th>
<th>
<input class="form-control" ng-model="Releaseid" id="releaseid" type="text" placeholder="Release ID">
</th>
<th>
<input class="form-control" ng-model="projectname" id="projectname" type="text" placeholder="Project Name">
</th>
<th>
<input class="form-control" ng-model="releasename" id="releasename" type="text" placeholder="Release Name">
</th>
<th>
<input class="form-control" ng-model="appname" id="applicationname" type="text" placeholder="Application Name">
</th>
<th>
<button ng-click="add()" class="btn btn-primary">
<span class="glyphicon glyphicon-plus"></span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filteredlist | filter: filterproject" ng-include="loadTemplate(item)">
</tr>
<!--orderBy=it will arrage the data, as default is is ascending. true:decending false:ascending| filter= allow to filter the table
<tr ng-repeat="item in filteredlist | orderBy: 'PPMID' | filter:filterproject">
<td>{{item.PPMID}}</td>
<td>{{item.EPRID}}</td>
<td>{{item.Releaseid}}</td>
<td>{{item.projectname}}</td>
<td>{{item.releasename}}</td>
<td>{{item.appname}}</td>
<td>
<button type="button" class="btn btn-default" ng-click="">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button ng-click="remove()" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>-->
</tbody>
</table>
<script type="text/ng-template" id="view">
<td>{{item.PPMID}}</td>
<td>{{item.EPRID}}</td>
<td>{{item.Releaseid}}</td>
<td>{{item.projectname}}</td>
<td>{{item.releasename}}</td>
<td>{{item.appname}}</td>
<td>
<button type="button" class="btn btn-default" ng-click="editContent(item)">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button ng-click="remove()" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td> <input class="form-control" ng-model="editablerow.PPMID" id="ppmid" type="number" min="1" placeholder="PPMID"></td>
<td><input class="form-control" ng-model="editablerow.EPRID" id="eprid" type="number" min="1" placeholder="EPRID"></td>
<td><input class="form-control" ng-model="editablerow.Releaseid" id="releaseid" type="text" placeholder="Release ID"></td>
<td><input class="form-control" ng-model="editablerow.projectname" id="projectname" type="text" placeholder="Project Name"></td>
<td><input class="form-control" ng-model="editablerow.releasename" id="releasename" type="text" placeholder="Release Name"></td>
<td><input class="form-control" ng-model="editablerow.appname" id="applicationname" type="text" placeholder="Application Name"></td>
<td>
<button type="button" class="btn btn-default" ng-click="saveData($index)">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button ng-click="reset()" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</script>
</div>
and the JS,
app.directive('maintenanceProject', [function() {
return{
restrict: 'EA',
scope: {},
templateUrl: 'modules/maintenance/maintenance-project.html',
link: function($scope, element, attrs)
{
$scope.allItems=getdummydata ();
$scope.filteredlist=$scope.allItems;
$scope.editablerow = '';
function getdummydata()
{
return [
{
id:1,
PPMID:10101,
EPRID:10201,
Releaseid: 10301,
projectname:'a',
releasename:'b',
appname:'c'
},
{
id:2,
PPMID:40102,
EPRID:40202,
Releaseid: 40302,
projectname:'d',
releasename:'e',
appname:'f'
},
{
id:3,
PPMID:50103,
EPRID:50203,
Releaseid: 50303,
projectname:'g',
releasename:'h',
appname:'i'
},
{
id:4,
PPMID:60104,
EPRID:60204,
Releaseid: 60304,
projectname:'j',
releasename:'k',
appname:'l'
},
{
id:5,
PPMID:70105,
EPRID:70205,
Releaseid: 70305,
projectname:'m',
releasename:'n',
appname:'o'
},
{
id:6,
PPMID:80106,
EPRID:80206,
Releaseid: 80306,
projectname:'p',
releasename:'q',
appname:'r'
}];
}
$scope.add=function()
{ //use unshift to add item in beginning of array
$scope.allItems.unshift(
{
PPMID: $scope.PPMID,
EPRID:$scope.EPRID,
Releaseid:$scope.Releaseid,
projectname:$scope.projectname,
releasename:$scope.releasename,
appname:$scope.appname
});
$scope.resetAll();
}
//to make its empty (reset back) for add
$scope.resetAll = function()
{
$scope.filteredList = $scope.allItems ;
$scope.PPMID = '';
$scope.EPRID = '';
$scope.Releaseid = '';
$scope.projectname = '';
$scope.releasename = '';
$scope.appname = '';
}
$scope.remove=function(item)
{
$scope.filteredlist.shift(1,1);
}
//for edit function
$scope.editContent=function(item)
{
$scope.editablerow=angular.copy(item);//now edittablerow hold value item id=..
}
$scope.loadTemplate= function(item)
{
if(item.id===$scope.editablerow.id) return 'edit';
else
return 'view';
}
$scope.saveData = function (indx)
{
$scope.allItems[indx] = angular.copy($scope.editablerow);
$scope.reset();
}
//ni reset for cancel
$scope.reset=function(){
$scope.editablerow=[];
}
}
};}])
