Question

我有一个管理徽章的AngularJS应用程序。在应用程序中有一个表单，用于设置徽章＃和分配给它的人的姓名等。这将存储在$ scope.badge中。

当用户提交表单时，我想将新徽章添加到徽章列表中，该徽章显示在表单下方。

部分代码如下所示：

var badge = angular.copy($scope.badge); // make a copy so we don't keep adding the same object
$scope.badgeList.push(badge);

我第一次运行此代码时，会按预期添加徽章。随后我运行此代码时，下一个徽章将替换badgeList中的上一个徽章。换句话说，如果我添加5个徽章，badgeList仍然只有1个对象，因为它只是不断被替换。

我认为这可能会发生，因为同一个对象不断被添加？也许我错了？我正在使用angular.copy来尝试避免这种情况发生，但它似乎并没有起作用。

对此有何想法？

Answer 1

$scope.badgeList.push(($scope.badge);
console.log($scope.badgeList)

无需使用angular.copy，因为您最终将所有徽章存储在数组中

当您想要复制对象而不更新现有对象并且克隆的更改未反映在主对象中时，使用

angular.copy。

如果您只想维护徽章列表，可以执行此代码块

像这样

 function addBadges(){
    $scope.badgeList.push(($scope.badge);
    console.log($scope.badgeList)

    }

如果您正在刷新控制器，那么很明显该变量将被重置，对于这种情况，您需要使用角度服务。创建服务并在服务内部，您需要定义有助于数据持久性的getter和setter方法如果保存在服务中，您的bages数组将一直存在，直到应用程序处于前台。

Answer 2

你可以这样做。

function addBadges(){
     //initialize if undefined or null
     if(!$scope.badgeList){
       $scope.badgeList = [];
     }

     //Check if badge does not exists in the list
     if ($scope.badgeList.indexOf($scope.badge) === -1) {
          //Add to badge list
          $scope.badgeList.push($scope.badge);
     }
}

Angular.copy不断给我相同的对象

2 个答案: