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

埃里克·米特詹斯(Eric Mitjans)

我有一个现有的数组,其中包含一个对象和第一步创建的多个属性。它由以下功能创建:

$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已经定义属性,但有些对象会在以后发布。

有指针吗?

编辑

我找到了2个解决方案,但是没有完成我想要的,所以可能我不清楚我要做什么。

我将对象集合保存到数组中,每个对象都有一个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因为该应用程序会跟踪汽车的行驶并且汽车尚未到达目的地。

每行还具有一个按钮trigger 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>   

如此,关于如何到达那里的任何提示?

一个更好的奥利弗

如果正确理解了您的问题,则要添加来更新单个记录arrival将记录传递给insertRecord

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS-如何向数组中的每个对象添加新属性

来自分类Dev

在angular js中向对象添加数组属性

来自分类Dev

如何使用Angular为数组中的每个对象添加唯一的类名?

来自分类Dev

如何使用Angular为数组中的每个对象添加唯一的类名?

来自分类Dev

我需要使用angularJS向数组添加对象

来自分类Dev

AngularJS模型,使用angular.extend(object.prototype,...)与angular.extend(object,...)

来自分类Dev

如何检测是否已使用angular.forEach AngularJS添加对象

来自分类Dev

angularjs使用angular.extend将$ scope绑定到服务不良/良好实践

来自分类Dev

如何使用angular.extend扩展对象?

来自分类Dev

使用AngularJS向每个页面添加导航和页脚

来自分类Dev

在Angular中向json对象添加空数组

来自分类Dev

AngularJS:使用angular属性指令将元素包装到自定义模板中

来自分类Dev

我想使用整数数组作为Java中的值向JSON对象添加属性

来自分类Dev

在对象数组和每个嵌套数组上使用Angular的分组依据表达式

来自分类Dev

使用AngularJS从数组添加值

来自分类Dev

使用angular js将对象附加到属性对象和对象数组

来自分类Dev

无法在Angular中使用AngularJS服务

来自分类Dev

AngularJS过滤器/向对象添加属性

来自分类Dev

如何使用angular.js向数组添加新的键和值?

来自分类Dev

使用 Angular 显示对象

来自分类Dev

使用Angular动态添加HTML属性

来自分类Dev

使用管道Angular 2过滤对象数组

来自分类Dev

如何在彼此独立的数组中的多个对象上使用具有相等性的Angular $ watch?

来自分类Dev

angularjs angular不读取数组的长度

来自分类Dev

鉴于 angular 与 angularjs 显示数组元素

来自分类Dev

使用指针向数组中的每个元素添加数字

来自分类Dev

如何使用AngularJs对对象数组中的属性值求和

来自分类Dev

AngularJS-使用$ http更新数组内的嵌套对象属性

来自分类Dev

使用Angular注入非Angular对象

Related 相关文章

  1. 1

    AngularJS-如何向数组中的每个对象添加新属性

  2. 2

    在angular js中向对象添加数组属性

  3. 3

    如何使用Angular为数组中的每个对象添加唯一的类名?

  4. 4

    如何使用Angular为数组中的每个对象添加唯一的类名?

  5. 5

    我需要使用angularJS向数组添加对象

  6. 6

    AngularJS模型,使用angular.extend(object.prototype,...)与angular.extend(object,...)

  7. 7

    如何检测是否已使用angular.forEach AngularJS添加对象

  8. 8

    angularjs使用angular.extend将$ scope绑定到服务不良/良好实践

  9. 9

    如何使用angular.extend扩展对象?

  10. 10

    使用AngularJS向每个页面添加导航和页脚

  11. 11

    在Angular中向json对象添加空数组

  12. 12

    AngularJS:使用angular属性指令将元素包装到自定义模板中

  13. 13

    我想使用整数数组作为Java中的值向JSON对象添加属性

  14. 14

    在对象数组和每个嵌套数组上使用Angular的分组依据表达式

  15. 15

    使用AngularJS从数组添加值

  16. 16

    使用angular js将对象附加到属性对象和对象数组

  17. 17

    无法在Angular中使用AngularJS服务

  18. 18

    AngularJS过滤器/向对象添加属性

  19. 19

    如何使用angular.js向数组添加新的键和值?

  20. 20

    使用 Angular 显示对象

  21. 21

    使用Angular动态添加HTML属性

  22. 22

    使用管道Angular 2过滤对象数组

  23. 23

    如何在彼此独立的数组中的多个对象上使用具有相等性的Angular $ watch?

  24. 24

    angularjs angular不读取数组的长度

  25. 25

    鉴于 angular 与 angularjs 显示数组元素

  26. 26

    使用指针向数组中的每个元素添加数字

  27. 27

    如何使用AngularJs对对象数组中的属性值求和

  28. 28

    AngularJS-使用$ http更新数组内的嵌套对象属性

  29. 29

    使用Angular注入非Angular对象

热门标签

归档