AngularJS 中的可编辑 Table 单元格

Question

我对其中的大部分内容都非常陌生，所以我很抱歉，我的代码大部分是从这个论坛借来的和捏造的，我边学边学。

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

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

我的数据显示是静态的，没有格式化或排序，只是 editable。

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

请不要指望自定义代码或高级课程，我知道我的工作非常基础，但如果有人能指出我正确的方向或一些有用的 links，我将不胜感激.

第一次在这里发帖，希望我提供的信息足够清楚。

p.s。我现在要睡觉了（英国晚上 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>

这是 link 到 my jsfiddle

Answer 1

在每个要编辑的内容上，添加一个 ng-click="onTdClick(x)"。

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

然后，在您的控制器中：

$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());
});

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

Answer 2

我建议制定一个处理每个单元格的指令。如果你给这个指令一个隔离范围，你就不必担心管理中央控制器中的所有数据。

类似于：

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 3

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

AngularJS 中的可编辑 Table 单元格

Editable Table Cell in AngularJS

javascript

angularjs

ng-repeat