Я создаю приложение для хранения записей в LocalStorage.
Каждая запись является объектом в массиве, и каждая запись содержит несколько объектов. Объект выглядит так:
$scope.recordlist.push(
{
date: $scope.dateJson,
time: $scope.time,
car: $scope.carList.code,
driver: $scope.driverList.name,
from: $scope.locationList.place,
destination: $scope.locationList2.place,
pax: $scope.paxList,
comment: '',
commenttime: '',
arrival: '',
inserted: '',
cancelled:'',
duration:''
}
);
Прямо сейчас, комментарий и commenttime являются строками. Я создаю и редактирую их, как это, из front-end:
<div class="col-md-1 msf-button">
<button class="btn-primary"
ng-init="inserted = true"
ng-click="editItem = !editItem"
ng-show="!record.arrival && !record.cancelled && !editItem">
<i class="fa fa-pencil"></i>
</button>
<button class="btn-success"
ng-click="commentTime(record); editItem = !editItem"
ng-show="!record.arrival && editItem && !record.cancelled">
<i class="fa fa-check"></i>
</button>
</div>
<div class="row msf-comment"
ng-show="editItem == true && !record.arrival"
ng-hide="!editItem">
<div class="col-md-12">
<input placeholder="Add a comment"
class="form-control"
ng-model="record.comment">
</div>
</div>
<div class="row msf-comment-row"
ng-show="!editItem && record.comment">
<div class="col-md-12">
<span class="caret"></span>
<span class="comment">
{{record.comment}} - {{record.commenttime}}
</span>
</div>
</div>
Первая кнопка отобразит первую строку с вводом (комментарий добавляется вручную)
Вторая кнопка скроет ввод и отобразит комментарий, а также добавит комментарий (commentTime (запись)):
$scope.commentTime = function (record){
record.commenttime = moment().format("HH.mm");
jsonToRecordLocalStorage($scope.recordlist);
};
Первая кнопка позволит редактировать этот комментарий, снова открывая вход и так далее.
Моя проблема заключается в следующем: на данный момент существует только один комментарий и один комментарий за запись.
Как мне удалось превратить комментарий и комментарий в массивы?
Я хотел бы добавить разные комментарии и другое время комментариев, больше похоже на контрольную точку.
После ответа от Spasho я получил здесь:
$scope.recordlist = extractRecordJSONFromLocalStorage();
$scope.addRecord = function () {
$scope.recordlist.push(
{
date: $scope.dateJson,
time: $scope.time,
car: $scope.carList.code,
driver: $scope.driverList.name,
from: $scope.locationList.place,
destination: $scope.locationList2.place,
pax: $scope.paxList,
comment: [{
message: '',
commenttime: ''
}],
commenttime: '',
arrival: '',
inserted: '',
cancelled:'',
duration:''
}
);
$scope.custom = $scope.custom === false ? true: false;
$scope.carList = 0;
$scope.driverList = 0;
$scope.locationList = 0;
$scope.locationList2 = 0;
jsonToRecordLocalStorage($scope.recordlist);
$scope.editItem = false;
};
$scope.commentTime = function (record){
$scope.record.comment.push(
{
commenttime : moment().format("HH.mm")
}
);
jsonToRecordLocalStorage($scope.recordlist);
};
function jsonToRecordLocalStorage(recordlist) {
var jsonRecordlist = angular.toJson(recordlist);
if (jsonRecordlist != 'null') {
localStorage.setItem("recordspax", jsonRecordlist);
} else {
alert("Invalid JSON!");
}
}
Но у меня возникают проблемы, когда я пытаюсь записать данные в комментарии.message и comment.commenttime.
Это соответствующая передняя часть:
<button class="btn-success"
ng-click="commentTime(record);">
<i class="fa fa-check"></i>
</button>
<div class="col-md-12">
<input placeholder="Add a comment"
class="form-control"
ng-model="record.comment.message">
</div>
<div class="col-md-12"
ng-repeat="comment in record.comment">
<span class="comment">
{{comment.message}} - {{comment.commenttime}}
</span>
</div>
Ввод с ng-model = "record.comment.message" должен хранить/отображать комментарий и функцию commentTime (запись) для хранения времени.
TypeError: Cannot read property 'comment' of undefined
Это то, что происходит, когда я запускаю commentTime (запись) с некоторым текстом (тестом) во входной модели:
Что мне не хватает?
изменить модель, чтобы комментировать массив объектов, например $scope.recordlist.push( { date: $scope.dateJson, time: $scope.time, car: $scope.carList.code, driver: $scope.driverList.name, from: $scope.locationList.place, destination: $scope.locationList2.place, pax: $scope.paxList, comments: [{ message: 'one comment', date: new Date() }], arrival: '', inserted: '', cancelled:'', duration:'' });
отображать комментарии в ng-repeat
и change input
<div class="col-md-12"> <input placeholder="Add a comment" class="form-control" ng-model="commentMessage">
</div>
<div class="row msf-comment-row"
ng-show="!editItem && record.comment">
<div class="col-md-12" ng-repeat="comment in record.comments">
<span class="caret"></span>
<span class="comment">
{{comment.message}} - {{comment.date| date: 'yyyy-MM-dd'}}
</span>
</div>
</div>
commentTime()
соответственно $scope.commentTime = function (record){ record.comment.push( { message: $scope.commentMessage, commenttime: moment().format("HH.mm") } ); jsonToRecordLocalStorage($scope.recordlist); };
record.comment.push