Я чрезвычайно новичок в большинстве из этого, поэтому мои извинения, мой код в основном попросил заимствовать и вымыл из этого форума, и я изучаю, как я иду.Редактируемая ячейка таблицы в AngularJS
В настоящее время я пытаюсь реплицировать систему отопления с подогревом, каждый день имеет 6 переключателей, которые могут изменять температуру.
Я загрузил некоторые примеры данных через мой контроллер и отобразился в таблице с помощью ng-repeat, но он не идеален, но пока работает и будет делать то, что мне нужно.
Мои данные являются статическими, без форматирования или сортировки, просто редактируемые.
Я сейчас застрял для следующего этапа, каждая ячейка внутри таблицы доступна для редактирования. Я прочитал большое количество сообщений и информации (в первую очередь о строках и использовании ng-grid и других надстроек), я надеюсь, что кто-то может указать мне в правильном направлении, пожалуйста, как продолжить мой текущий код, как определить каждый ячейка и по щелчку появляются модальные, что позволит вводить три элемента, которые составляют каждую ячейку, часы, минуты и темп.
Пожалуйста, не ожидайте специального кода или расширенного урока, я знаю, что моя работа чрезвычайно проста, но если кто-то может указать мне в правильном направлении или на некоторые полезные ссылки, которые будут очень признательны.
Моя первая публикация здесь, я надеюсь, что моя предоставленная информация достаточно ясна.
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 + '° 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>Вот ссылка на my jsfiddle
Вместо того, чтобы просто визуализации данных, используйте '' теги внутри вашего ' нг-repeat's. Затем, если вам нужны правильные временные входы, вы можете использовать некоторые библиотеки timepicker: http: //mgcrea.github.io/angular-strap/## timepickers – floribon
Благодарим floribon за быстрый ответ и предложение относительно времени, я играл со сборщиками времени для моего кода и имел несколько проблем, поэтому придумал очень простой подборщик списков, который я хочу вызов. Если я использую теги ввода в строке, мне нужно получить идентификатор ячейки для вызова моих данных (извинения за то, что моя формулировка является настолько базовой). Я видел множество примеров исправления строк, но ни один из них не работал на уровне ячеек, а также то, как я потянул данные и потерял себя. –
Извините, я не понимаю, что вы подразумеваете под «мне нужно получить идентификатор ячейки для вызова моих данных». Но вы, вероятно, этого не сделали, все данные поступают из ng-repeat, и если вы хотите обрабатывать пользовательские изменения, вы можете добавить 'ng-change = 'onDataChange ($ index, model)", чтобы узнать, какая ячейка вы отредактировали например. – floribon