0
編集機能を作成した後、私の追加機能が動作しない理由を知ることができますか？ユーザーは、データを入力してプラスボタンのアイコンをクリックして、データをテーブルに追加します。データは配列の先頭に追加されます。しかし今、ユーザーがadd（プラスアイコン）をクリックしたとき。データはreturn 'edit'になります。私は、データが編集に戻ることを確実にする方法を知らない。いくつかの研究を行う、私は$インデックスを使用している場合、配列にIDを追加する必要はありませんことを学ぶの後ここ はangularjsにunshift関数が追加されていない
<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=[];
}
}
};}])
私はプランカを含めてお勧めします、私はあなたがした場合、より多くの覗き込みが助けになると思います。 – alphapilgrim
このhtmlのディレクティブへの呼び出しが見つかりません。どこで使用しますか？ –