Переход от строки к массиву в AngularJS

0

Я создаю приложение для хранения записей в 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 (запись) с некоторым текстом (тестом) во входной модели:

Изображение 174551

Что мне не хватает?

  • 0
    Не уверен, что конкретно проблема, если вы делаете их массивы?
  • 0
    список записей является массивом, вы не можете получить доступ к «комментарию» непосредственно из массива. Вот почему вы передаете «запись» в функцию :) do record.comment.push
Показать ещё 6 комментариев
Теги:
arrays

1 ответ

1
Лучший ответ
  1. изменить модель, чтобы комментировать массив объектов, например $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:'' });

  2. отображать комментарии в 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>
  1. изменить commentTime() соответственно

$scope.commentTime = function (record){ record.comment.push( { message: $scope.commentMessage, commenttime: moment().format("HH.mm") } ); jsonToRecordLocalStorage($scope.recordlist); };

  • 0
    Я думаю, что вы отправили меня в правильном направлении, но я все еще что-то упустил! Хотите проверить редактирование? Спасибо!
  • 1
    Починил это! Нужно изменить модель на ng-model = "record.commentMessage":)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню