AngularJS 中的可编辑表格单元格 [英] Editable Table Cell in AngularJS

问题描述

我对大部分内容都非常陌生，所以我很抱歉，我的代码主要是从这个论坛借来和捏造的，我正在学习.

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

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

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

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

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

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

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

function rowController($scope) {$scope.sw1 = [{小时:'01'，分钟:'05'，温度:'32'}, {小时:'02'，分钟:'05'，温度:'20'}, {小时:'03'，分钟:'05'，温度:'13'}, {小时:'04'，分钟:'05'，温度:'23'}, {小时:'05'，分钟:'05'，温度:'12'}, {小时:'06'，分钟:'05'，温度:'02'}, {小时:'07'，分钟:'05'，温度:'02'}, ];$scope.sw2 = [{小时:'01'，分钟:'10'，温度:'32'}, {小时:'02'，分钟:'10'，温度:'20'}, {小时:'03'，分钟:'10'，温度:'13'}, {小时:'04'，分钟:'10'，温度:'23'}, {小时:'05'，分钟:'10'，温度:'12'}, {小时:'06'，分钟:'10'，温度:'02'}, {小时:'07'，分钟:'10'，温度:'02'}, ];$scope.sw3 = [{小时:'01'，分钟:'15'，温度:'32'}, {小时:'02'，分钟:'15'，温度:'20'}, {小时:'03'，分钟:'15'，温度:'13'}, {小时:'04'，分钟:'15'，温度:'23'}, {小时:'05'，分钟:'15'，温度:'12'}, {小时:'06'，分钟:'15'，温度:'02'}, {小时:'07'，分钟:'15'，温度:'02'}, ];$scope.sw4 = [{小时:'01'，分钟:'20'，温度:'32'}, {小时:'02'，分钟:'20'，温度:'20'}, {小时:'03'，分钟:'20'，温度:'13'}, {小时:'04'，分钟:'20'，温度:'23'}, {小时:'05'，分钟:'20'，温度:'12'}, {小时:'06'，分钟:'20'，温度:'02'}, {小时:'07'，分钟:'20'，温度:'02'}, ];$scope.sw5 = [{小时:'01'，分钟:'25'，温度:'32'}, {小时:'02'，分钟:'25'，温度:'20'}, {小时:'03'，分钟:'25'，温度:'13'}, {小时:'04'，分钟:'25'，温度:'23'}, {小时:'05'，分钟:'25'，温度:'12'}, {小时:'06'，分钟:'25'，温度:'02'}, {小时:'07'，分钟:'25'，温度:'02'}, ];$scope.sw6 = [{小时:'01'，分钟:'30'，温度:'32'}, {小时:'02'，分钟:'30'，温度:'20'}, {小时:'03'，分钟:'30'，温度:'13'}, {小时:'04'，分钟:'30'，温度:'23'}, {小时:'05'，分钟:'30'，温度:'12'}, {小时:'06'，分钟:'30'，温度:'02'}, {小时:'07'，分钟:'30'，温度:'02'}, ];}

 th, td {文本对齐:居中；}上校{最小宽度:95px；最大宽度:95px；}.桌子 {宽度:自动；}

<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><头><tr class="信息"><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead><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>

<script src="rowController.js"></script>

这是我的jsfiddle

的链接

解决方案

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

类似于:

var tempEx = angular.module('TempEx', []);tempEx.directive('tempCell', function () {返回 {限制:'A'，范围: {温度:'=tempCell'},模板: '\<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()">保存</button>\<button ng-click="cancel()">取消</button>\

\<span ng-show="!editMode()">\{{ temp.hours }} : {{ temp.minutes }} - {{ temp.temp }} \</span>',链接:函数($scope，$element){$element.on('click', function ($event) {如果 ($scope.editMode()) 返回；$scope.enableEdit();});},控制器:函数($scope，$timeout){var 切换 = false;$scope.meta = {模式:'查看'};$scope.enableEdit = 函数 () {如果(切换)返回；console.log('aaaaaand 编辑');$scope.meta.mode = '编辑';$超时(函数(){$scope.$apply()});}$scope.editMode = 函数 () {返回 $scope.meta.mode === '编辑';};$scope.save = 函数 () {//在这里做事};$scope.cancel = 函数 () {切换 = 真；$超时(函数(){$scope.meta.mode = '视图';切换=假；}, 250);};}}}).controller('RowCtrl', function ($scope) {$scope.temps = {};$scope.temps.sw1 = [{小时:'01'，分钟:'05'，温度:'32'}, {小时:'02'，分钟:'05'，温度:'20'}, {小时:'03'，分钟:'05'，温度:'13'}, {小时:'04'，分钟:'05'，温度:'23'}, {小时:'05'，分钟:'05'，温度:'12'}, {小时:'06'，分钟:'05'，温度:'02'}, {小时:'07'，分钟:'05'，温度:'02'}, ];$scope.temps.sw2 = [{小时:'01'，分钟:'10'，温度:'32'}, {小时:'02'，分钟:'10'，温度:'20'}, {小时:'03'，分钟:'10'，温度:'13'}, {小时:'04'，分钟:'10'，温度:'23'}, {小时:'05'，分钟:'10'，温度:'12'}, {小时:'06'，分钟:'10'，温度:'02'}, {小时:'07'，分钟:'10'，温度:'02'}, ];$scope.temps.sw3 = [{小时:'01'，分钟:'15'，温度:'32'}, {小时:'02'，分钟:'15'，温度:'20'}, {小时:'03'，分钟:'15'，温度:'13'}, {小时:'04'，分钟:'15'，温度:'23'}, {小时:'05'，分钟:'15'，温度:'12'}, {小时:'06'，分钟:'15'，温度:'02'}, {小时:'07'，分钟:'15'，温度:'02'}, ];$scope.temps.sw4 = [{小时:'01'，分钟:'20'，温度:'32'}, {小时:'02'，分钟:'20'，温度:'20'}, {小时:'03'，分钟:'20'，温度:'13'}, {小时:'04'，分钟:'20'，温度:'23'}, {小时:'05'，分钟:'20'，温度:'12'}, {小时:'06'，分钟:'20'，温度:'02'}, {小时:'07'，分钟:'20'，温度:'02'}, ];$scope.temps.sw5 = [{小时:'01'，分钟:'25'，温度:'32'}, {小时:'02'，分钟:'25'，温度:'20'}, {小时:'03'，分钟:'25'，温度:'13'}, {小时:'04'，分钟:'25'，温度:'23'}, {小时:'05'，分钟:'25'，温度:'12'}, {小时:'06'，分钟:'25'，温度:'02'}, {小时:'07'，分钟:'25'，温度:'02'}, ];$scope.temps.sw6 = [{小时:'01'，分钟:'30'，温度:'32'}, {小时:'02'，分钟:'30'，温度:'20'}, {小时:'03'，分钟:'30'，温度:'13'}, {小时:'04'，分钟:'30'，温度:'23'}, {小时:'05'，分钟:'30'，温度:'12'}, {小时:'06'，分钟:'30'，温度:'02'}, {小时:'07'，分钟:'30'，温度:'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><头><tr class="信息"><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead><tr ng-repeat="key in rows" ng-init="curTemps = temps[key]"><td ng-repeat="temp in curTemps" temp-cell="temp"></td></tr></tbody>