使用AngularJS的angular.extend将属性添加到数组中每个对象中

Question

使用AngularJS的angular.extend将属性添加到数组中每个对象中

8

我有一个现有的数组，其中包含一个对象和几个属性，是在第一步中创建的。它是由以下函数创建的：

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

    $scope.custom = $scope.custom === false ? true: false;
    $scope.carList = 0;
    $scope.driverList = 0;
    $scope.locationList = 0;
    $scope.locationList2 = 0;
    jsonToRecordLocalStorage($scope.recordlist);
};

它的结果是以下数组：

[{
  "date":"2014 10 16",
  "time":"20.22",
  "car":"396",
  "driver":"Seb",
  "from":"A",
  "destination":"B",
  "pax":"3"
}]

我想做的是在下一步中使用ng-click将另一个属性添加到现有对象中。我尝试了以下函数，但似乎不起作用。

$scope.insertRecord = function (recordlist) {

    var arrival = { 'arrival' : moment().format("HH.mm") }
    console.log(arrival)
    angular.extend($scope.recordlist, arrival)


    jsonToRecordLocalStorage($scope.recordlist);
}

我需要的最终结果如下：

[{
  "date":"2014 10 16",
  "time":"20.22",
  "car":"396",
  "driver":"Seb",
  "from":"A",
  "destination":"B",
  "pax":"3",
  "arrival":"23.10"
}]

也许需要考虑的另一件事是，在应用程序中存在许多不同的对象列表，其中一些已经定义了"到达"属性，但有些可能在以后才会定义。有什么建议吗？

编辑：

我得到了两个解决方案，但都没有实现我想要的目标，所以可能我没有清楚我要做什么。我正在将一组对象保存到数组中，每个对象都有一个"到达"属性，在第二步中将被定义。因此，首先我创建了这样一个对象数组：

[
 {
  "date":"2014 10 16",
  "time":"20.42",
  "car":"396",
  "driver":"Seb",
  "from":"A",
  "destination":"B",
  "pax":"3",
 },
 {
  "date":"2014 10 16",
  "time":"20.12",
  "car":"319",
  "driver":"Seb",
  "from":"C",
  "destination":"D",
  "pax":"4",
 },
 {
  "date":"2014 10 16",
  "time":"20.22",
  "car":"396",
  "driver":"Seb",
  "from":"G",
  "destination":"A",
  "pax":"1",
 }
]

这将以类似表格的布局显示在视图上。每行包含来自对象的数据，并且最初不包括arrival属性，因为应用程序跟踪汽车运动，汽车尚未到达目的地。

每行还具有一个按钮，触发insertRecord()，定义到达时间并应独立包括arrival属性到每个对象中。

因此，在这个例子中，也许第二个对象的汽车已经到达，我想能够只为这个特定的对象添加arrival属性，保留数组如下：

[
 {
  "date":"2014 10 16",
  "time":"20.42",
  "car":"396",
  "driver":"Seb",
  "from":"A",
  "destination":"B",
  "pax":"3"
 },
 {
  "date":"2014 10 16",
  "time":"20.12",
  "car":"319",
  "driver":"Seb",
  "from":"C",
  "destination":"D",
  "pax":"4",
  "arrival":"20.35"
 },
 {
  "date":"2014 10 16",
  "time":"20.22",
  "car":"396",
  "driver":"Seb",
  "from":"G",
  "destination":"A",
  "pax":"1"
 }
]

来自 dfsq 的两个解决方案让我可以为数组的第一个对象或者所有对象同时定义到达时间，但是不能分别为每个对象定义。

这是调用 insertData 的 HTML 代码：

<div class="row msf-row" ng-repeat="record in recordlist | filter: search">
      <div class="col-md-1">{{record.time}}</div>
      <div class="col-md-1"><strong>{{record.car}}</strong></div>
      <div class="col-md-1">{{record.driver}}</div>
      <div class="col-md-3">{{record.from}}</div>
      <div class="col-md-3">{{record.destination}}</div>
      <div class="col-md-1">{{record.pax}}</div>
      <div class="col-md-1">
           <button ng-click="insertRecord()" ng-show="!record.arrival"><i class="fa fa-cog"></i></button>{{record.arrival}}
      </div>
</div>

这样，您有没有关于如何到达那里的提示呢？

- Eric Mitjans

每一行也有一个触发insertRecord()的按钮 - 那么为什么不将该行的对象传递给insertRecord呢？ - a better oliver

你能详细说明如何做吗？谢谢！ - Eric Mitjans

你需要展示HTML的那一部分，即调用insertRecord的部分。 - a better oliver

完成！我更新了问题。 - Eric Mitjans

2个回答

8

如果我理解您的问题正确，您想通过添加“arrival”来更新单个记录。将该记录传递给“insertRecord”函数：

<button ng-click="insertRecord(record)" ng-show="!record.arrival">

您可以在相应的记录中添加属性:

$scope.insertRecord = function (record) {
  record.arrival =  moment().format("HH.mm");

- a better oliver

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dfsq · Accepted Answer

根据您的代码，$scope.recordlist 是一个对象数组。因此，您可能想要这样做：

angular.extend($scope.recordlist[0], arrival);

更新如果要更新数组中的每个对象，可以使用 map 方法：

$scope.recordlist = $scope.recordlist.map(function(obj) {
    return angular.extend(obj, arrival);
});