column onaftersave

onaftersave for a column form is not displaying errors correctly

by ckosloski

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="http://code.angularjs.org/1.0.8/angular-mocks.js"></script>
<h4>Angular-xeditable Editable column (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
      <table class="table table-bordered table-hover table-condensed">
    <tr style="font-weight: bold; white-space: nowrap">
      <!-- username header -->
      <td style="width:40%">
        Name
        <form editable-form name="nameform" onaftersave="saveColumn('name')" ng-show="nameform.$visible">
          <button type="submit" ng-disabled="nameform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="nameform.$waiting" ng-click="nameform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>  
        <button class="btn btn-default" ng-show="!nameform.$visible" ng-click="nameform.$show()">
          edit
        </button>
      </td>
    </tr>
    <tr ng-repeat="user in users">
      <td>
        <!-- editable username (text with validation) -->
        <span editable-text="user.name" e-name="name2" e-form="nameform">
          {{ user.name || 'empty' }}
        </span>
      </td>
    </tr>
  </table>  
</div>

CSS

div[ng-app] { margin: 10px; }

JavaScript

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



app.controller('Ctrl', function($scope, $filter, $q, $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}
  ]; 
  // outcommended still working? how?
  $scope.saveColumn = function(column) {
    var results = [];
    angular.forEach($scope.users, function(user) {
      results.push($http.post('/saveColumn', {column: column, value: user[column], id: user.id}));
    })
    return $q.all(results);
  };
});

// ---------------- mock $http requests --------------------
app.run(function($httpBackend, editableOptions) {
	editableOptions.theme = 'bs3';
  
 //same here ?
  $httpBackend.whenPOST(/\/saveColumn/).respond(function(method, url, data) {
    data = angular.fromJson(data);
    if(data.column === 'name' && data.value !== 'awesome') {
      return [500, 'Username should be `awesome`']; 
    } else {
      return [200, {status: 'ok'}]; 
    }
  }); 
});