如何在加载时实现角度可编辑编辑状态禁用

Question

加载可编辑状态编辑状态已启用，并显示保存和取消按钮。 我怎样才能改变状态，并在相应的行中显示编辑按钮，点击该字段就会变为可编辑状态。

如何在添加新行时获取保存取消。

// 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可编辑的rowform。

将新用户推入appCtrl.users数组将创建一个新行。您可以向用户添加属性（.isNew），插入表单时可能为true，并且在更新后始终设置为false。然后shown="row.isNew"应该工作。

如果你不能改变你的对象模型，你推新用户到一个newUsers数组，然后使用shown="appCtrl.newUsers.indexOf(row)>-1"应该工作。在onafterupdate，你将不得不从阵列中删除用户。

更新：据我可以从代码告诉，如果你想在运行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> 

这应该使行显示为可编辑，当您插入一个新用户。您可能需要在saveUser函数中设置inserted = {}，但我还没有查看过您的编辑功能。

此外，我认为你需要创建一个添加按钮来调用你的addRandomUser函数。