Editable Table

by Duke Dinh

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>
<div ng-app="app" ng-controller="Ctrl">
    <table id="addShippingDeviceTable" class="table table-bordered table-hover table-condensed table-striped">
        <tr style="font-weight: bold">
            <td>Shipping Device</td>
            <td>Count</td>
            <td>Height</td>
            <td>Length</td>
            <td>Width</td>
            <td>Weight</td>
            <td>Stackable</td>
            <td>
                <button class="btn btn-default" ng-click="addDevice()">Add row</button>
            </td>
        </tr>
        <tr ng-repeat="device in devices">
            <td> <span editable-select="device.name" e-name="name" e-form="rowform" e-ng-options="s.value as s.text for s in names">
          {{ showStatus(device) }}
        </span>

            </td>
            <td> <span editable-text="device.count" e-name="count" e-form="rowform" e-required>
          {{ device.count || 'empty' }}
        </span>

            </td>
            <td> <span editable-text="device.height" e-name="height" e-form="rowform" e-required>
          {{ device.height || 'empty' }}
        </span>

            </td>
            <td> <span editable-text="device.length" e-name="length" e-form="rowform" e-required>
          {{ device.length || 'empty' }}
        </span>

            </td>
            <td> <span editable-text="device.width" e-name="width" e-form="rowform" e-required>
          {{ device.width || 'empty' }}
        </span>

            </td>
            <td> <span editable-text="device.weight" e-name="weight"...

CSS

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

JavaScript

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

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

app.controller('Ctrl', function ($scope, $filter, $http) {
    $scope.devices = [];

    $scope.names = [
        { value: 1, text: 'Box-Small' },
        { value: 2, text: 'Box-Medium' },
        { value: 3, text: 'Box-Large' },
        { value: 4, text: 'Pack' },
        { value: 5, text: 'Tube' },
        { value: 6, text: 'Pallet' },
        { value: 7, text: 'Non-Pallet' },
        { value: 8, text: 'Letter' },
        { value: 9, text: 'Other' }
    ]; 
    $scope.stackables = [
        { value: 1, text: 'No' },
        { value: 2, text: 'Yes' }
    ];

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

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

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

    $scope.showStackables = function (device) {
        var selected = [];
        if (device.stackable) {
            selected = $filter('filter')($scope.stackables, {
                value: device.stackable
            });
        }
        return selected.length ? selected[0].text : 'Not set';
    };

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