Question

Angular X只能编辑一行，如果我点击下一行编辑，前一行应重置为初始状态。

这是我的HTML代码：

var app = angular.module("app", ["xeditable", "ngMockE2E"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter, $http) {
 $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data, id) {
    if (id === 2 && data !== 'awesome') {
      return "Username 2 should be `awesome`";
    }
  };

  $scope.saveUser = function(data, id) {
    //$scope.user not updated yet
    angular.extend(data, {id: id});
    return $http.post('/saveUser', data);
  };

  // remove user
  $scope.removeUser = function(index) {
    $scope.users.splice(index, 1);
  };

  // add user
  $scope.addUser = function() {
    $scope.inserted = {
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null 
    };
    $scope.users.push($scope.inserted);
  };
});

// --------------- mock $http requests ----------------------
app.run(function($httpBackend) {
  $httpBackend.whenGET('/groups').respond([
    {id: 1, text: 'user'},
    {id: 2, text: 'customer'},
    {id: 3, text: 'vip'},
    {id: 4, text: 'admin'}
  ]);

  $httpBackend.whenPOST(/\/saveUser/).respond(function(method, url, data) {
    data = angular.fromJson(data);
    return [200, {status: 'ok'}];
  });
});

这是我的Javascript代码：

div[ng-app] { margin: 10px; }
.table {width: 100% }
form[editable-form] > div {margin: 10px 0;}

这是我的CSS代码：

set applicationSupportFolder to POSIX path of (path to application support folder from user domain)
set filepath to POSIX path of (choose file with prompt "Chose your file")
do shell script "cp " & quoted form of filepath & space & quoted form of applicationSupportFolder

Answer 1

在这里我找到了解决方案，只是修改了一些html和ctrl函数。

这里是Angular xeditable working js fiddle link： - http://jsfiddle.net/NfPcH/19522/

这里是代码更改：

<form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline checkVisible" shown="inserted == user">
      <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="editCall(rowform)">edit</button>
      <button class="btn btn-danger" ng-click="removeUser($index)">del</button>
    </div>

CTRL更改： -

    $scope.editCall=function(rowform){
     if ( $( ".checkVisible" )
            .is( ":visible" ) ) {
    //alert("One row is active already");
    if(confirm("Are you sure, you want save current row and move to next row")){
    rowform.$show();
    }else{
        alert("Please save current row and move to next");
    }
    }else{
        rowform.$show();

       }
   }

Angular X只能编辑一行，如果我点击下一行编辑上一行应重置为初始状态

1 个答案: