我可以知道为什么在创建编辑功能后我的添加功能无效。据推测,用户将输入数据并单击加号按钮图标将数据添加到表中。数据将在数组的开头添加。但现在,当用户点击添加(加上图标)。数据将转至return 'edit'
。我不知道如何确保数据将返回编辑状态。
这是我的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>
和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=[];
}
}
};}])
答案 0 :(得分:1)
在做了一些研究之后,我了解到在使用$ index时我不必在数组中添加id。因为$ index将作为数组的编号。因此,我删除了每个数组的{1}}
的ID因为我从我的数组中删除了id。因此,在
return [
{
PPMID:10101,
EPRID:10201,
Releaseid: 10301,
projectname:'a',
releasename:'b',
appname:'c'
},
函数中,我将$scope.loadTempalte
更改为if(item.id===$scope.editablerow.id)
if(item.PPMID===$scope.editablerow.PPMID)
我希望我帮助了很多人。如果你还是不明白,请不要犹豫,问我。谢谢。