添加unshift函数无法在angularjs

时间:2016-11-22 18:16:35

标签: javascript angularjs angularjs-directive angularjs-scope push

我可以知道为什么在创建编辑功能后我的添加功能无效。据推测,用户将输入数据并单击加号按钮图标将数据添加到表中。数据将在数组的开头添加。但现在,当用户点击添加(加上图标)。数据将转至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=[];
    }
  }
};}])

1 个答案:

答案 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)

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