Changing from String to Array in AngularJS

Question

I'm building an app to store records in LocalStorage.

Each record is an object in an array, and each record contains multiple objects. The object looks like this:

$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:''
            }
        ); 

Right now, comment and commenttime are strings. I create and edit them like this from the 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>

The first button will show the first row with the input (comment is added manually)

The second button will hide the input and display the comment, as well as adding commenttime (commentTime(record)):

$scope.commentTime = function (record){
    record.commenttime = moment().format("HH.mm");
    jsonToRecordLocalStorage($scope.recordlist);
};  

The first button will allow to edit this comment, opening the input again and so on.

My problem is as follows: As of now, there's only one comment and one commenttime per record.

How could I manage to turn comment and commenttime into arrays?

I would like to add different comments and different commenttime, more like a checkpoint thing.

EDIT

Following the answer from Spasho I've gotten here:

$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!");
    }
}             

But I run into trouble when I try to record data into comment.message and comment.commenttime.

This is the relevant Front end part:

  <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>

The input with ng-model="record.comment.message" is supposed to store/display the comment, and the commentTime(record) function to store the time.

TypeError: Cannot read property 'comment' of undefined

This is what happens when I trigger commentTime(record) with some text (test) in the input model:

What am I missing?

Answer 1

1. change the model to make comment an array of objects, e.g. $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. display the comments in an ng-repeat and change input bind

<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>

3. change commentTime() accordingly

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