AngularJS - x-editable editable table

by epinapala

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>Service Readiness</h4>

<div ng-app="app" ng-controller="Ctrl">
    <form editable-form name="tableform" onaftersave="saveTable()">
        <!-- table -->
        <table class="table table-bordered table-hover table-condensed" style="width: 80%">
            <tr style="font-weight: bold">
                <th>Type</th>
                <th>List of Services</th>
                <th>Date Needed</th>
                <th>External Service/Api?</th>
                <th>Owner</th>
            </tr>
            <tr ng-repeat="item in items">
                <td> <span editable-select="item.type" e-form="tableform" e-ng-options="s.value as s.text for s in types">
            {{ showType(item) }}
          </span>

                </td>
                <td> <span editable-text="item.list" e-focus-me="item.isFocused" e-form="tableform" onbeforesave="checkList($data)">
            {{ item.list || 'empty' }}
          </span>

                </td>
                <td> <span editable-text="item.dateneeded" e-focus-me="item.isFocused" e-form="tableform" onbeforesave="checkDateNeeded($data)">
            {{ item.dateneeded || 'empty' }}
          </span>

                </td>
                <td> <span editable-select="item.external" e-form="tableform" e-ng-options="s.value as s.text for s in externals">
            {{ showExternal(item) }}
          </span>

                </td>
                <td> <span editable-text="item.owner" e-focus-me="item.isFocused" e-form="tableform" onbeforesave="checkOwner($data)">
            {{...

JavaScript

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

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

app.directive('focusMe', function ($timeout, $parse) {
    return {
        //scope: true,   // optionally create a child scope
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
            // to address @blesh's comment, set attribute value to 'false'
            // on blur event:
            element.bind('blur', function () {
                scope.$apply(model.assign(scope, false));
            });
        }
    };
});

app.controller('Ctrl', function ($scope, $filter, $q, $http, $timeout) {

    var itemsPendingSave = [];

    $scope.items = [{
        id: 1,
        fnareasignoffid: 0,
        type: 2,
        list: 'A,B,C',
        dateneeded: '01/02/2014',
        external: 2,
        owner: 'epinapala'
    }];

    $scope.types = [{
        value: 1,
        text: 'Select'
    }, {
        value: 2,
        text: 'As Is'
    }, {
        value: 3,
        text: 'Modify'
    }, {
        value: 4,
        text: 'New'
    }];

    $scope.externals = [{
        value: 1,
        text: 'Select Y?N'
    }, {
        value: 2,
        text: 'Yes'
    }, {
        value: 3,
        text: 'No'
    }];

    $scope.showType = function (item) {
        var selected = [];
        if (item.type) {
            selected = $filter('filter')($scope.types, {
                value: item.type
            });
        }
        return selected.length ? selected[0].text : 'Not set';
    };

    $scope.showExternal = function (item) {
       var selected = [];
        if (item.external) {
            selected = $filter('filter')($scope.externals, {
               ...