javascript - 在 AngularJS 中从字符串更改为数组

Question

我正在构建一个应用程序来将记录存储在 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:''
            }
        ); 

现在，comment 和 commenttime 是字符串。我从前端创建和编辑它们:

<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(record)):

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

但是当我尝试将数据记录到comment.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(record) 函数则用于存储时间。

TypeError: Cannot read property 'comment' of undefined

这就是当我用输入模型中的一些文本(测试)触发 commentTime(record) 时发生的情况:

我错过了什么？

Answer 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 中的评论并更改输入绑定(bind)


<div class="col-md-12">
<input placeholder="Add a comment"
class="form-control"
ng-model="commentMessage"><br/>
</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);
};