javascript AngularJS 中的可编辑表格单元格

Editable Table Cell in AngularJS

提问by Andy Donegan

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.

目前我正在尝试复制一个加热器定时系统，每天有 6 个可以改变温度的开关。

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.

我已经通过我的控制器加载了一些示例数据并使用 ng-repeat 显示在表格中，这并不理想，但目前它正在工作并且会做我需要的。

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.

我现在被困在下一阶段，表格中的每个单元格都是可编辑的。我已经阅读了大量的帖子和信息（主要是关于行和使用 ng-grid 和其他附加组件），我希望有人能指出我正确的方向，请教我如何继续我当前的代码如何识别每个单元格并单击弹出一个模式，允许输入组成每个单元格的三个元素，小时，分钟和温度。

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.

ps 我现在要睡觉了（英国晚上 11:30），从今天早上（以及周末的大部分时间）早上 7 点开始睡觉后，我需要把眼睛从屏幕上移开。

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

这是我的 jsfiddle的链接

采纳答案by colefner

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>

回答by rajesh_kw

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

有人写了这个，最好的例子小提琴：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>

回答by restassured

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

在您要编辑的每一个上，添加一个 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

查看 $modal：http: //angular-ui.github.io/bootstrap/#/modal