AngularJS中的可编辑表格单元格
我对这大部分内容都非常新，所以我很抱歉，我的代码大多是从这个论坛借来的，并在我学习的过程中学习。
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.
目前我正在尝试复制加热器计时系统，每天有6个开关可以改变温度。
Currently I am trying to replicate a heater timing system, each day has 6 switches which can alter the temperature.
我已经通过我的控制器加载了一些示例数据并显示在一个使用ng-repeat的表，它不是理想的，但暂时它正在工作，并将按我的要求行事。
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.
我现在陷入下一阶段，表格中的每个单元格都是可编辑的。我已经阅读了大量的帖子和信息（主要是关于行和使用ng-grid和其他附加组件），我希望有人可以指出我正确的方向请关于如何继续我当前的代码如何id每个单击并单击弹出一个模态，允许输入构成每个单元格的三个元素，小时，分钟和临时。
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.
ps我现在要去睡觉了（英国时间晚上11点30分），今天上午7点（以及周末的大部分时间）上班后，我需要把目光从屏幕上移开。
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 + '° c' }}</td>
</tr>
<tr>
<td ng-repeat="x in sw2">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '° c' }}</td>
</tr>
<tr>
<td ng-repeat="x in sw3">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '° c' }}</td>
</tr>
<tr>
<td ng-repeat="x in sw4">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '° c' }}</td>
</tr>
<tr>
<td ng-repeat="x in sw5">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '° c' }}</td>
</tr>
<tr>
<td ng-repeat="x in sw6">{{ x.hours + ':' + x.minutes + ' ' + x.temp + '° c' }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="rowController.js"></script>
这是我的jsfiddle 的链接
我建议制作一个处理每个单元格的指令。如果您将此指令赋予隔离范围，则无需担心管理*控制器中的所有数据。
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.
类似于：
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>