Editable Table Cell in AngularJS

Question

I am extremely new to most of this so my apologies, my code is mostly beg borrowed and fudged from this forum and I am learning as I go along.

Currently I am trying to replicate a heater timing system, each day has 6 switches which can alter the temperature.

I have loaded some example data in via my controller and displayed in a table using ng-repeat, it is not ideal but for the time being it is working and will do what I require.

My data is display is static, no formatting or sorting, just editable.

I am now stuck for the next stage, every cell within the table is editable. I have read a great deal of posts and information (primarily on rows and using ng-grid and other add-ons), I am hoping somebody can point me in the right direction please on how to proceed with my current code how to id each cell and on click pop up a modal which will allow for input of the three elements which make up each cell, hours,minutes and temp.

Please I do not expect custom code or an advanced lesson, I know my work is extremely basic, but if somebody could point me in the right direction or to some helpful links that would be greatly appreciated.

My first time posting here, I hope my information provided is clear enough.

p.s. I am going to bed now (11:30pm UK) and after being on this since 7am this morning (and most of the weekend) I need to get my eyes away from the screen.

function rowController($scope) {
    $scope.sw1 = [{
        hours: '01',
        minutes: '05',
        temp: '32'
    }, {
        hours: '02',
        minutes: '05',
        temp: '20'
    }, {
        hours: '03',
        minutes: '05',
        temp: '13'
    }, {
        hours: '04',
        minutes: '05',
        temp: '23'
    }, {
        hours: '05',
        minutes: '05',
        temp: '12'
    }, {
        hours: '06',
        minutes: '05',
        temp: '02'
    }, {
        hours: '07',
        minutes: '05',
        temp: '02'
    }, ];
    $scope.sw2 = [{
        hours: '01',
        minutes: '10',
        temp: '32'
    }, {
        hours: '02',
        minutes: '10',
        temp: '20'
    }, {
        hours: '03',
        minutes: '10',
        temp: '13'
    }, {
        hours: '04',
        minutes: '10',
        temp: '23'
    }, {
        hours: '05',
        minutes: '10',
        temp: '12'
    }, {
        hours: '06',
        minutes: '10',
        temp: '02'
    }, {
        hours: '07',
        minutes: '10',
        temp: '02'
    }, ];
    $scope.sw3 = [{
        hours: '01',
        minutes: '15',
        temp: '32'
    }, {
        hours: '02',
        minutes: '15',
        temp: '20'
    }, {
        hours: '03',
        minutes: '15',
        temp: '13'
    }, {
        hours: '04',
        minutes: '15',
        temp: '23'
    }, {
        hours: '05',
        minutes: '15',
        temp: '12'
    }, {
        hours: '06',
        minutes: '15',
        temp: '02'
    }, {
        hours: '07',
        minutes: '15',
        temp: '02'
    }, ];
    $scope.sw4 = [{
        hours: '01',
        minutes: '20',
        temp: '32'
    }, {
        hours: '02',
        minutes: '20',
        temp: '20'
    }, {
        hours: '03',
        minutes: '20',
        temp: '13'
    }, {
        hours: '04',
        minutes: '20',
        temp: '23'
    }, {
        hours: '05',
        minutes: '20',
        temp: '12'
    }, {
        hours: '06',
        minutes: '20',
        temp: '02'
    }, {
        hours: '07',
        minutes: '20',
        temp: '02'
    }, ];
    $scope.sw5 = [{
        hours: '01',
        minutes: '25',
        temp: '32'
    }, {
        hours: '02',
        minutes: '25',
        temp: '20'
    }, {
        hours: '03',
        minutes: '25',
        temp: '13'
    }, {
        hours: '04',
        minutes: '25',
        temp: '23'
    }, {
        hours: '05',
        minutes: '25',
        temp: '12'
    }, {
        hours: '06',
        minutes: '25',
        temp: '02'
    }, {
        hours: '07',
        minutes: '25',
        temp: '02'
    }, ];
    $scope.sw6 = [{
        hours: '01',
        minutes: '30',
        temp: '32'
    }, {
        hours: '02',
        minutes: '30',
        temp: '20'
    }, {
        hours: '03',
        minutes: '30',
        temp: '13'
    }, {
        hours: '04',
        minutes: '30',
        temp: '23'
    }, {
        hours: '05',
        minutes: '30',
        temp: '12'
    }, {
        hours: '06',
        minutes: '30',
        temp: '02'
    }, {
        hours: '07',
        minutes: '30',
        temp: '02'
    }, ];
}

        th, td {
            text-align: center;
        }
        col {
            min-width:95px;
            max-width:95px;
        }
        .table {
            width:auto;
        }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-fluid">
    <div ng-app="" ng-controller="rowController">
        <div class="table-responsive col-xs-12">
            <table class="table table-bordered table-striped">
                <colgroup>
                    <col span="1" />
                    <col span="1" />
                    <col span="1" />
                    <col span="1" />
                    <col span="1" />
                    <col span="1" />
                    <col span="1" />
                </colgroup>
                <thead>
                    <tr class="info">
                        <th>Monday</th>
                        <th>Tuesday</th>
                        <th>Wednesday</th>
                        <th>Thursday</th>
                        <th>Friday</th>
                        <th>Saturday</th>
                        <th>Sunday</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td ng-repeat="x in sw1">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '&deg; c' }}</td>
                    </tr>
                    <tr>
                        <td ng-repeat="x in sw2">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '&deg; c' }}</td>
                    </tr>
                    <tr>
                        <td ng-repeat="x in sw3">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '&deg; c' }}</td>
                    </tr>
                    <tr>
                        <td ng-repeat="x in sw4">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '&deg; c' }}</td>
                    </tr>
                    <tr>
                        <td ng-repeat="x in sw5">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '&deg; c' }}</td>
                    </tr>
                    <tr>
                        <td ng-repeat="x in sw6">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '&deg; c' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="rowController.js"></script>

Here's a link to my jsfiddle

Answer 1

I suggest making a directive that handles each cell. If you give this directive an isolate scope, you will not have to worry about managing all the data in your central controller.

Something like:

var tempEx = angular.module('TempEx', []);

tempEx.directive('tempCell', function () {
    return {
        restrict: 'A',
        scope: {
            temp: '=tempCell'
        },
        template: '\
<input type="text" ng-model="temp.temp" ng-show="editMode()" /> \
<input type="text" ng-model="temp.hours" ng-show="editMode()" /> \
<input type="text" ng-model="temp.minutes" ng-show="editMode()" /> \
<div ng-show="editMode()"> \
    <button ng-click="save()">Save</button> \
    <button ng-click="cancel()">Cancel</button> \
</div> \
<span ng-show="!editMode()"> \
    {{ temp.hours }} : {{ temp.minutes }} - {{ temp.temp }} \
</span>',
        link: function ($scope, $element) {
            $element.on('click', function ($event) {
                if ($scope.editMode()) return;
                $scope.enableEdit();
            });
        },
        controller: function ($scope, $timeout) {

            var toggling = false;

            $scope.meta = {
                mode: 'view'
            };

            $scope.enableEdit = function () {
                if (toggling) return;
                console.log('aaaaaand edit');
                $scope.meta.mode = 'edit';
                $timeout(function () {
                    $scope.$apply()
                });
            }

            $scope.editMode = function () {
                return $scope.meta.mode === 'edit';
            };

            $scope.save = function () {
                // do stuff here
            };

            $scope.cancel = function () {
                toggling = true;
                $timeout(function () {
                    $scope.meta.mode = 'view';
                    toggling = false;
                }, 250);
            };
        }

    }
})

    .controller('RowCtrl', function ($scope) {

    $scope.temps = {};

    $scope.temps.sw1 = [{
        hours: '01',
        minutes: '05',
        temp: '32'
    }, {
        hours: '02',
        minutes: '05',
        temp: '20'
    }, {
        hours: '03',
        minutes: '05',
        temp: '13'
    }, {
        hours: '04',
        minutes: '05',
        temp: '23'
    }, {
        hours: '05',
        minutes: '05',
        temp: '12'
    }, {
        hours: '06',
        minutes: '05',
        temp: '02'
    }, {
        hours: '07',
        minutes: '05',
        temp: '02'
    }, ];
    $scope.temps.sw2 = [{
        hours: '01',
        minutes: '10',
        temp: '32'
    }, {
        hours: '02',
        minutes: '10',
        temp: '20'
    }, {
        hours: '03',
        minutes: '10',
        temp: '13'
    }, {
        hours: '04',
        minutes: '10',
        temp: '23'
    }, {
        hours: '05',
        minutes: '10',
        temp: '12'
    }, {
        hours: '06',
        minutes: '10',
        temp: '02'
    }, {
        hours: '07',
        minutes: '10',
        temp: '02'
    }, ];
    $scope.temps.sw3 = [{
        hours: '01',
        minutes: '15',
        temp: '32'
    }, {
        hours: '02',
        minutes: '15',
        temp: '20'
    }, {
        hours: '03',
        minutes: '15',
        temp: '13'
    }, {
        hours: '04',
        minutes: '15',
        temp: '23'
    }, {
        hours: '05',
        minutes: '15',
        temp: '12'
    }, {
        hours: '06',
        minutes: '15',
        temp: '02'
    }, {
        hours: '07',
        minutes: '15',
        temp: '02'
    }, ];
    $scope.temps.sw4 = [{
        hours: '01',
        minutes: '20',
        temp: '32'
    }, {
        hours: '02',
        minutes: '20',
        temp: '20'
    }, {
        hours: '03',
        minutes: '20',
        temp: '13'
    }, {
        hours: '04',
        minutes: '20',
        temp: '23'
    }, {
        hours: '05',
        minutes: '20',
        temp: '12'
    }, {
        hours: '06',
        minutes: '20',
        temp: '02'
    }, {
        hours: '07',
        minutes: '20',
        temp: '02'
    }, ];
    $scope.temps.sw5 = [{
        hours: '01',
        minutes: '25',
        temp: '32'
    }, {
        hours: '02',
        minutes: '25',
        temp: '20'
    }, {
        hours: '03',
        minutes: '25',
        temp: '13'
    }, {
        hours: '04',
        minutes: '25',
        temp: '23'
    }, {
        hours: '05',
        minutes: '25',
        temp: '12'
    }, {
        hours: '06',
        minutes: '25',
        temp: '02'
    }, {
        hours: '07',
        minutes: '25',
        temp: '02'
    }, ];
    $scope.temps.sw6 = [{
        hours: '01',
        minutes: '30',
        temp: '32'
    }, {
        hours: '02',
        minutes: '30',
        temp: '20'
    }, {
        hours: '03',
        minutes: '30',
        temp: '13'
    }, {
        hours: '04',
        minutes: '30',
        temp: '23'
    }, {
        hours: '05',
        minutes: '30',
        temp: '12'
    }, {
        hours: '06',
        minutes: '30',
        temp: '02'
    }, {
        hours: '07',
        minutes: '30',
        temp: '02'
    }, ];

    $scope.rows = ['sw1', 'sw2', 'sw3', 'sw4', 'sw5', 'sw6'];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div class="container-fluid" ng-app="TempEx">
    <div>
        <div class="table-responsive col-xs-12" ng-controller="RowCtrl">
            <table class="table table-bordered table-striped">
                <colgroup>
                    <col span="1" />
                    <col span="1" />
                    <col span="1" />
                    <col span="1" />
                    <col span="1" />
                    <col span="1" />
                    <col span="1" />
                </colgroup>
                <thead>
                    <tr class="info">
                        <th>Monday</th>
                        <th>Tuesday</th>
                        <th>Wednesday</th>
                        <th>Thursday</th>
                        <th>Friday</th>
                        <th>Saturday</th>
                        <th>Sunday</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="key in rows" ng-init="curTemps = temps[key]">
                        <td ng-repeat="temp in curTemps" temp-cell="temp"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 2

On each that you want to edit, add a ng-click="onTdClick(x)".

<td ng-click="onTdClick(x)">

Then, in your controller:

$scope.onTdClick = function(x) {
  var modalInstance = $modal.open({
  templateUrl: 'your-modal-content.html',
  controller: 'YourModalCtrl',
  resolve: {
    editingItem: function () {
      return x;
    }
  }
});

modalInstance.result.then(function (editingItem) {
  $log.info("Modal closed on success: ", editingItem);
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

Check out $modal: http://angular-ui.github.io/bootstrap/#/modal

Answer 3

Someone wrote this, best example fiddle : http://jsfiddle.net/davekr/F7K63/43/

<!DOCTYPE html>
<div ng-app ng-controller="myCtrl" class="container">Double-click on the items below to edit:
    <button type="button" ng-click="newItem()">Add item</button>
        <table>
        <tr ng-repeat="item in items">
            <td>
                <span ng-hide="item.editing" ng-dblclick="editItem(item)">{{item.name}}</span>
                <input ng-show="item.editing" ng-model="item.name" ng-blur="doneEditing(item)" autofocus />
            </td>
        </tr>
        </table>
</div>