添加unshift函数在angularjs中不起作用

Question

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=[];
    }
  }
};}])

Answer 1

After do some research, I learn that I don't have to add id in array when using $index. because $index will act as numbering to the array. Therefore I delete id of each array return [ { PPMID:10101, EPRID:10201, Releaseid: 10301, projectname:'a', releasename:'b', appname:'c' },

Since I have delete id from my array. Therefore in $scope.loadTempalte function, I change if(item.id===$scope.editablerow.id) into if(item.PPMID===$scope.editablerow.PPMID)

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

I hope that I've help a lot of people. If you still don't understand, do not hesitate to ask me. Thank you.