使用AngularJS angular.extend 为数组的每个对象独立添加属性

Posted 2023-03-05

【中文标题】使用AngularJS angular.extend 为数组的每个对象独立添加属性

【英文标题】：Adding property to each object of an array independently with AngularJS angular.extend

【发布时间】：2014-12-12 04:31:12

【问题描述】：

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

$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"
]

也许还需要考虑的另一件事是，在应用程序中可能会列出许多不同的对象，其中一些已经定义了 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",
 ,
 
  "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 提出的 2 个解决方案允许我同时定义数组的第一个对象或所有对象的到达，但不能单独定义每个对象。

这是调用 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>   

既然如此，有什么关于如何到达那里的提示吗？

【问题讨论】：

"每一行还有一个触发 insertRecord() 的按钮" - 那你为什么不把该行的对象传递给insertRecord呢？

您能否详细说明如何做到这一点？谢谢！！

您需要显示 HTML 的那部分，即调用 insertRecord 的部分。

完成！我更新了问题。

【参考方案1】：

根据您的代码，$scope.recordlist 是一个对象数组。所以你可能想要这个：

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

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

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

【讨论】：

这行得通！问题是它总是会更新同一个对象（第一个），我希望能够逐个更新“到达”属性对象。你怎么看？

意思是第一个函数会创建一个对象数组，我希望能够独立的在每个对象中插入到达属性。

我更新了我的问题，因为我认为我对我试图完成的工作不够清楚。您的两个解决方案都有效，但都不是我需要的。无论如何，谢谢伙计！

【参考方案2】：

如果正确理解您的问题，您希望通过添加 arrival 来更新单个记录。将记录传给insertRecord：

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

您可以在此处将属性添加到相应的记录中：

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