0

我可以知道为什么我的add函数在创建编辑函数后无法工作。假设用户将输入数据并点击加号按钮图标将数据添加到表格中。数据将在数组的开头添加。但现在,当用户点击添加(加上图标)。数据将会转到return 'edit'。我不知道如何确保数据将返回到编辑状态。 这里是我的HTML,添加unshift函数不能在angularjs中工作

<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

我会建议包括一名运动员,我认为如果你这样做的话,更多的潜水员会倾向于提供帮助。 – alphapilgrim

+0

我无法在此html中找到对指令的调用..您在哪里使用它? –

回答

1

做了一些研究之后,我了解到,我没有使用$索引时在数组中添加ID 。因为$ index将作为数组的编号。因此,我删除每个阵列的ID return [ { PPMID:10101, EPRID:10201, Releaseid: 10301, projectname:'a', releasename:'b', appname:'c' },

因为我从我的数组中删除ID。因此,在$scope.loadTempalte功能,我改变if(item.id===$scope.editablerow.id)if(item.PPMID===$scope.editablerow.PPMID)

$scope.loadTemplate= function(item) 
    { 
    if(item.PPMID===$scope.editablerow.PPMID) return 'edit'; 
    else 
     return 'view'; 
    } 

我希望,我已经帮助了很多人。如果你还不明白,请不要犹豫,问我。谢谢。