将新数据添加到现有的 scope-angularjs答案

【问题标题】：Add new datas into existing scope-angularjs将新数据添加到现有的 scope-angularjs
【发布时间】：2019-12-13 10:22:23
【问题描述】：

我已经开始学习 angularjs，我正在尝试在 button 上插入新值，点击 existing scope。我的页面中有一个按钮，每当我单击该按钮时 $scope.options 方法触发一些数据需要添加到范围变量中以在 ng-repeat 上使用它。

首先直接点击添加，因为没有数据。当我下次单击时，应使用现有范围添加新值。

这是我尝试过的，

$scope.options=function(options){           
    //$scope.datas=[];
    //$scope.datas.push(options);
    //$scope.datas = $scope.datas.concat(options)
    $scope.datas=options;
    console.log($scope.datas);          
}

对于第一次单击按钮，我的范围如下所示，

$scope.datas=["IARZ1DS099","CATL0DS32","IARZ1DS13","IATL0DS099","CARZ1DS099"];

谁能告诉我该怎么做？提前致谢！

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

这是因为您正在分配值$scope.datas=options;。您需要将值推送到$scope.datas 数组；

试试这个：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <script type="text/javascript">
    var myApp = angular.module('myApp', [])
      .controller('MyCtrl', function MyCtrl($scope) {
        $scope.options = function (options) {
          if (!$scope.datas) {
            $scope.datas = ["IARZ1DS099", "CATL0DS32", "IARZ1DS13", "IATL0DS099", "CARZ1DS099"]
          } else {
            $scope.datas.push("new value")
          }
          //console.log($scope.datas);
        }
      })
  </script>
</head>
<body>
  <div ng-controller="MyCtrl">
    <button ng-click="options()">
      add Data
    </button>
    <div ng-repeat="data in datas track by $index">
      {{data}}
    </div>
  </div>
</body>
</html>

【讨论】：

收到Cannot read property 'length' of undefined 错误。
在顶部声明`$scope.datas = [];`。看看我是如何声明的。
如果我这样声明，每次长度都为 0

【解决方案2】：

使用JavaScriptconcat方法。

您的代码有什么问题，您将新的记录集直接分配给您的数组，这会用新数据覆盖您现有的数组。您确切需要的是将数组与新数据集连接起来，并将其重新分配给现有数组。

$scope.datas = $scope.datas.concat(options);

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.datas = ["IARZ1DS099"];
    
    $scope.options = function(options){  
      console.log('Before concat -- ', $scope.datas);
      $scope.datas = $scope.datas.concat(options);
      console.log('After concat -- ', $scope.datas);
    }
    
    $scope.options(["CATL0DS32","IARZ1DS13","IATL0DS099","CARZ1DS099"]);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

</div>

【讨论】：

它对我不起作用。抛出 concat 未定义错误。
@user7566666 你能检查我的解决方案吗？只是为了确保我们在同一行。
它没有连接，仅作为新数组插入:-(
@user7566666 你检查过我的解决方案控制台吗？起初它只记录一个元素的现有数组，在数组与新的 4 个值连接后，新控制台显示 5 个元素，即现有数组中的一个元素和新连接的 4 个元素。请验证。

【解决方案3】：

找到解决办法。

$scope.options=function(options){               
    if (!$scope.datas) {
        $scope.datas =options;
    } else {
        for(i=0;i<options.length;i++){
            $scope.datas.push(options[i]);
        }
    }
}

@user7566666 感谢您的帮助。

【讨论】：

你现在做的是对array.concat的手动操作。