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

Question

我对其中的大部分内容都非常陌生，所以我深表歉意，我的代码大部分是从这个论坛上借用和捏造的，我正在学习。

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

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

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

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

请不要指望自定义代码或高级类(class)，我知道我的工作非常基础，但如果有人能指出正确的方向或一些有用的链接，我将不胜感激。

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

附注我现在要 sleep 了(英国晚上 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>

这是指向 my jsfiddle 的链接

Answer 1

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

类似于:

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>