Question

我正在构建一个应用程序来存储LocalStorage中的记录。

每个记录都是数组中的对象，每个记录包含多个对象。该对象如下所示：

Recurse(Foo) -> Recurse(baz) -> Recurse(List<List<String>>) -> Recurse(List<String>)...

目前，评论和评论时间是字符串。我从前端创建并编辑它们：

$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（记录））：

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

第一个按钮将允许编辑此评论，再次打开输入，依此类推。

我的问题如下：截至目前，每条记录只有一条评论和一条评论时间。

我怎样才能将评论和评论时间转换为数组？

我想添加不同的评论和不同的评论时间，更像是检查点的事情。

修改

根据Spasho的回答，我来到这里：

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

但是当我尝试将数据记录到comment.message和comment.commenttime 时，我遇到了麻烦。

这是相关的前端部分：

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

使用ng-model =“record.comment.message”的输入应该存储/显示注释，而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>

当我在输入模型中使用一些文本（test）触发commentTime（record）时会发生这种情况：

我错过了什么？

Answer 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:'' });
在ng-repeat中显示评论并更改输入绑定

<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); };

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

修改

1 个答案: