как сделать нагрузка угловое-xeditable состояние редактирования отключено

Question

Включено состояние изменения нагрузки xeditable и оно также отображает кнопку сохранения и отмены. Как я могу изменить, чтобы состояние было unedit и оно отображает кнопку редактирования в соответствующей строке, при щелчке по полю становится доступным для редактирования.

Как получить сохранение отмены при добавлении новой строки.

// HTML код

<div ng-controller="AppSettingsController as appCtrl"> 
    <button type="button" ng-click="addRandomItem()" class="btn btn-sm btn-success"> 
    <i class="glyphicon glyphicon-plus"> 
      </i> Add new record 
    </button> 
    <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped"> 
    <thead> 
     <tr> 
     <th class="sortable" st-sort="parameterkey">Parameter Key</th> 
     <th class="sortable" st-sort="description">Description</th> 
     <th class="sortable" st-sort="value">Value</th> 
     <th class="sortable" st-sort="type">Type</th> 
     <th class="sortable" st-sort="active">Active</th> 
     <th> Action</th> 
     </tr> 
     <tr> 
     <th colspan="6"> 
      <input st-search="" class="form-control" placeholder="global search ..." type="text" /> 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="row in appCtrl.users"> 
     <td> 
     <span editable-text="row.key" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required> 
      {{ row.key || 'empty' }} 
     </span> 
     </td> 
     <td >{{row.description}}</td> 
     <td >{{row.value}}</td> 
     <td >{{row.type}}</td> 
     <td >{{row.activeYn}}</td> 
     <td > 
     <!-- form --> 
     <form editable-form shown="true" name="rowform" onbeforesave="appCtrl.saveParam($data, row.paramId)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == param"> 
      <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary"> 
      save 
      </button> 
      <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default"> 
      cancel 
      </button> 
     </form> 
     <div class="buttons" ng-show="!rowform.$visible"> 
      <button class="btn btn-primary" ng-click="rowform.$show()">edit</button> 
     </div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
    <div style="padding-bottom: 10px; padding-left: 5px; padding-right: 5px;"> 
    <button class="btn btn-primary" type="submit" style="float: right; margin-right: 5px;" ng-click="appCtrl.save()">Submit</button> 
    </div> 
</div> 

// JS код

(function() { 
    'use strict'; 
    angular.module('app.controllers') 
     .controller("AppSettingsController", AppSettingsController); 
    app.run(function(editableOptions) { 
      editableOptions.theme = 'bs3'; 
     }); 
    AppSettingsController.$inject = ['$scope','$http','LookupService','$filter']; 
    function AppSettingsController($scope,$http,LookupService,$filter){ 
     var vm = this; 
     vm.users=[]; 
     vm.param={}; 
     $http({ 
      method: 'GET', 
      url: 'param/getAllAppParam', 
     }).then(function(resp){ 
      if(resp.data.result != null && resp.data.result != undefined && resp.data.code == 0 && resp.data.result!=false){ 
       vm.users=resp.data.result; 
      } 
      else{ 
       vm.successMsg = ""; 
       vm.errorMsg = "Error occured in Server..!User Could not be saved..!"; 
       console.log(vm.errorMsg); 
       vm.saved = false; 
      } 
     }); 

      //copy the references (you could clone ie angular.copy but then have to go through a dirty checking for the matches) 
      // $scope.displayedCollection = [].concat($scope.rowCollection); 

      //add to the real data holder 
      $scope.addRandomItem = function addRandomItem() { 
       $scope.rowCollection.unshift({ 
        /* "paramId": "<input ng-model='row.description'/>", 
        "value": "", 
        "activeYn": "", 
        "description": "", 
        "type": "", 
        "query": "", 
        "key": ""*/ 
        }); 
      }; 

      //remove to the real data holder 
      $scope.removeItem = function removeItem(row) { 
       var index = $scope.rowCollection.indexOf(row); 
       if (index !== -1) { 
        $scope.rowCollection.splice(index, 1); 
       } 
      } 


      vm.saveParam = function(data, paramId) { 
       console.log("param Id :"+paramId); 

       angular.extend(data, {paramId: paramId}); 
       console.log("save :"+ JSON.stringify(data)); 
       //return $http.post('/saveUser', data); 
       }; 

      vm.save = function(){ 
       $http({ 
         method: 'POST', 
         url: 'param/saveAppParam', 
         data: vm.param 
        }).then(function(resp){ 
         if(resp.data.result != null && resp.data.result != undefined && resp.data.code == 0 && resp.data.result!=false){ 
          vm.errorMsg =""; 
          /*vm.clear();*/ 
          /*vm.successMsg=resp.data.message + " Registration Id:"+ resp.data.result.regId;*/ 
          vm.saved = true; 
         } 
         else{ 
          vm.successMsg = ""; 
          vm.errorMsg = "Error occured in Server..!User Could not be saved..!"; 
          console.log(vm.errorMsg); 
          vm.saved = false; 
         } 

        }); 
       }; 
    } 

    })(); 

Answer 1

Есть много способов, чтобы поместить строку в редактируемый состояние при добавлении новой строки, но я хотел бы сделать это с список appCtrl.users вместо того, чтобы пытаться испортить x-редактируемую строку.

нажатие нового пользователя в массив appCtrl.users создаст новую строку. Вы можете добавить к пользователю атрибут (.isNew), который может быть правдой, когда вы вставляете форму и всегда устанавливаете значение false onafterupdate. Затем должен работать shown="row.isNew".

Если вы не можете изменить свою объектную модель, вы нажимаете нового пользователя в массив newUsers, а затем используете shown="appCtrl.newUsers.indexOf(row)>-1". в onafterupdate вам придется удалить пользователя из массива.

UPDATE: насколько я могу сказать из кода, если вы хотите новую строку, чтобы быть доступным для редактирования при запуске функции addRandomUser, функция должна выглядеть следующим образом:

 $scope.addRandomItem = function addRandomItem() { 
      $scope.inserted = { 
       "paramId": "<input ng-model='row.description'/>", 
       "value": "", 
       "activeYn": "", 
       "description": "", 
       "type": "", 
       "query": "", 
       "key": ""*/ 
       }); 
      $scope.users.push($scope.inserted) 
    }; 

тогда ваш HTML для строка должна выглядеть так:

<form editable-form shown="true" name="rowform" 
     onbeforesave="appCtrl.saveParam($data, row.paramId)" 
     ng-show="rowform.$visible" class="form-buttons form-inline" 
     shown="appCtrl.inserted == row"> 
    <div class="buttons" ng-show="rowform.$visible"> 
     <button type="submit" ng-disabled="rowform.$waiting" 
       class="btn btn-primary"> 
     save 
     </button> 
     <button type="button" ng-disabled="rowform.$waiting" 
       ng-click="rowform.$cancel()" class="btn btn-default"> 
     cancel 
     </button> 
    </div> 
     <button class="btn btn-primary" ng-show="!rowform.$visible" 
       ng-click="rowform.$show()">edit</button> 
</form> 

Это должно сделать строку отображаемой как редактируемую, когда вы вставляете нового пользователя. Возможно, вам потребуется установить insert = {} в вашу функцию saveUser, и я еще не просмотрел ваши функции редактирования.

Кроме того, я думаю, вам нужно создать кнопку добавления, чтобы вызвать функцию addRandomUser.