0
편집 기능을 생성 한 후 왜 추가 기능이 작동하지 않는지 알 수 있습니까? 사용자는 데이터를 입력하고 더하기 버튼 아이콘을 클릭하여 테이블에 데이터를 추가합니다. 배열의 처음에 데이터가 추가됩니다. 그러나 이제는 사용자가 추가 (더하기 아이콘)를 클릭 할 때. 데이터는 return 'edit'으로 이동합니다. 나는 데이터가 편집으로 되돌아 갈 수 있도록 보장 할 방법을 모른다. 몇 가지 조사를 한 후 여기 내 HTML이는 angularjs에서 unshift 기능이 작동하지 않습니다.
과 JS
<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>
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=[];
}
}
};}])
나는 플 런커 (plunker)를 포함 시키라고 제안하고 싶습니다. 만약 당신이 원한다면, 더 많은 친구들이 도움이 될 것이라고 생각합니다. – alphapilgrim
이 html로 지침에 대한 호출을 찾을 수 없습니다. 어디에서 사용합니까? –