JSFiddle - React, Tailwind, and code Playground

by Sampath Lokuge

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 table (Bootstrap 3)</h4>

<div ng-app="app" ng-controller="Ctrl">
    <form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()" ng-init="tableform.$show()">
        <!-- table -->
        <table class="table table-bordered table-hover table-condensed">
            <tr style="font-weight: bold">
                <td style="width:40%">Name</td>
                <td style="width:30%">Status</td>
                <td style="width:30%">Group</td>
                <td style="width:30%"><span ng-show="tableform.$visible">Action</span>

                </td>
            </tr>
            <tr ng-repeat="user in users | filter:filterUser">
                <td>
                    <!-- editable username (text with validation) --> <span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)">
            {{ user.name || 'empty' }}
          </span>

                </td>
                <td>
                    <!-- editable status (select-local) --> <span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in statuses">
            {{ showStatus(user) }}
          </span>

                </td>
                <td>
                    <!-- editable group (select-remote) --> <span editable-select="user.group" e-form="tableform" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
            {{ showGroup(user) }}
          </span>

                </td>
                <td>
                    <button...

CSS

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

JavaScript

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

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

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
    }];

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


    $scope.setBulkPaymentType = function (data,tableform) {
        for (var i = 0; i < tableform.$editables.length; i++) {
            if (tableform.$editables[i].name === 'user.status') {
                tableform.$editables[i].scope.$data = data;

            }
        }
    };


    $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...