I hav use xeditable then how to call http link in json

See more:

jQuery

JSON

AngularJs

<h3>Table xEditable
   <small>Edit in place for AngularJS</small>
</h3>
<div ng-controller="TablexEditableController as table" class="container-fluid">
   <!-- Editable row-->
   <h4 class="page-header">Editable row</h4>
   <table class="table table-bordered table-hover bg-white">
      <tr style="font-weight: bold">
         <td style="width:35%">Name</td>
                  <td style="width:35%">date</td>

         <td style="width:20%">Status</td>
         <td style="width:20%">Group</td>
         <td style="width:25%">Edit</td>
      </tr>
      <tr ng-repeat="user in table.users">
         <td>
            <!-- editable username (text with validation)-->
            <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="table.checkName($data, user.id)" e-required="">{{ user.name || &apos;empty&apos; }}</span>
         </td>
          <td>
            <!-- editable username (text with validation)-->
            <span editable-text="user.date" e-name="date" e-form="rowform" onbeforesave="table.checkName($data, user.id)" e-required="">{{ user.date || &apos;empty&apos; }}</span>
         </td>

         <td>
            <!-- editable username (text with validation)-->
            <span editable-text="user.phone" e-name="phone" e-form="rowform" onbeforesave="table.checkName($data, user.id)" e-required="">{{ user.phone || &apos;empty&apos; }}</span>
         </td>

         <td>
            <!-- editable status (select-local)-->
            <span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in table.statuses">{{ table.showStatus(user) }}</span>
         </td>
         <td>
            <!-- editable group (select-remote)-->
            <span editable-select="user.group" e-name="group" onshow="table.loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in table.groups">{{ table.showGroup(user) }}</span>
         </td>
         <td style="white-space: nowrap">
            <!-- form-->
            <form editable-form="" name="rowform" onbeforesave="table.saveUser($data, user.id)" ng-show="rowform.$visible" shown="table.inserted == user" class="form-buttons form-inline">
               <button type="submit" ng-disabled="rowform.$waiting" title="Save" class="btn btn-sm btn-info">
                  <em class="fa fa-save"></em>
               </button>
               <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" title="Cancel" class="btn btn-sm btn-default">
                  <em class="fa fa-times"></em>
               </button>
            </form>
            <div ng-show="!rowform.$visible" class="buttons">
               <button ng-click="rowform.$show()" title="Edit" class="btn btn-sm btn-info">
                  <em class="fa fa-pencil"></em>
               </button>
               <button ng-click="table.removeUser($index)" title="Delete" class="btn btn-sm btn-danger">
                  <em class="fa fa-trash"></em>
               </button>
            </div>
         </td>
      </tr>
   </table>
   <button ng-click="table.addUser()" class="btn btn-default">Add row</button>
   <!-- Editable column-->
   
   <!-- Editable table-->
  </div>

function() {
    'use strict';

    angular
        .module('app.tables')
        .controller('TablexEditableController', TablexEditableController);

    TablexEditableController.$inject = ['$filter', '$http', 'editableOptions', 'editableThemes','$q'];
    function TablexEditableController($filter, $http, editableOptions, editableThemes, $q) {
        var vm = this;

        activate();

        ////////////////

        function activate() {

          // editable row
          // ----------------------------------- 
          vm.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}
          ];

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

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

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

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

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

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

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

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

          // editable column
          // ----------------------------------- 


          vm.saveColumn = function(column) {
            var results = [];
            angular.forEach(vm.users, function(/*user*/) {
              // results.push($http.post('/saveColumn', {column: column, value: user[column], id: user.id}));
              console.log('Saving column: ' + column);
            });
            return $q.all(results);
          };

          // editable table
          // ----------------------------------- 

          // filter users to show
          vm.filterUser = function(user) {
            return user.isDeleted !== true;
          };

          // mark user as deleted
          vm.deleteUser = function(id) {
            var filtered = $filter('filter')(vm.users, {id: id});
            if (filtered.length) {
              filtered[0].isDeleted = true;
            }
          };

          // cancel all changes
          vm.cancel = function() {
            for (var i = vm.users.length; i--;) {
              var user = vm.users[i];
              // undelete
              if (user.isDeleted) {
                delete user.isDeleted;
              }
              // remove new 
              if (user.isNew) {
                vm.users.splice(i, 1);
              }
            }
          };

          // save edits
          vm.saveTable = function() {
            var results = [];
            for (var i = vm.users.length; i--;) {
              var user = vm.users[i];
              // actually delete user
              if (user.isDeleted) {
                vm.users.splice(i, 1);
              }
              // mark as not new 
              if (user.isNew) {
                user.isNew = false;
              }

              // send on server
              // results.push($http.post('/saveUser', user));
              console.log('Saving Table...');
            }

            return $q.all(results);
          };

        }
    }
})();

What I have tried:

all the function is work but i need to call json in http how can i use it can any 1 help me this plz