Add new datas into existing scope-angularjs

Question

I have started to learn angularjs, I am trying to insert new values on button click with existing scope. I have one button in my page,whenever I click that button $scope.options method triggered some datas need to be added into a scope variable to use it on ng-repeat.

For first click its adding directly because there is no-existing data. When I click next time new values should be added with existing scope.

Here is what i have tried,

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

For first click of button my scope looks like this,

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

Can anyone let me know how can I do it? Thanks in Advance!

Saurabh Agrawal · Accepted Answer · 2019-12-13 10:45:22Z

2

This is because you are assigning value $scope.datas=options;. You need to push value to $scope.datas array;

Try this:

<!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>

edited Dec 13, 2019 at 10:45

answered Dec 13, 2019 at 10:31

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user7566666 Over a year ago

am getting Cannot read property 'length' of undefined error.

Saurabh Agrawal Over a year ago

Declare ` $scope.datas = [];` at the top. See how I declared.

user7566666 Over a year ago

if i declare like that,each time am getting length as 0

Nitheesh · Accepted Answer · 2019-12-13 10:54:58Z

1

Use JavaScript concat method.

Whats wrong in your code is, you are assigning the new set of records directly to your array, which overwrites your existing array with new data. What you require exactly is concatenating your array with new set of datas and reassign the same to the existing array.

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

edited Dec 13, 2019 at 10:54

answered Dec 13, 2019 at 10:26

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

4 Comments

user7566666 Over a year ago

it does't work to me. throws concat not defined error.

Nitheesh Over a year ago

@user7566666 can you check my solution? Just to make sure that we are in same line.

user7566666 Over a year ago

its not concatinating,inserts as new array only :-(

Nitheesh Over a year ago

@user7566666 Have you checked my solution console? At first it logs the existing array with only one element, after the array has been concatenated with new 4 values, the new console displays 5 elements, that is one from existing array and 4 from new concatenation. Please verify.

georgeawg · Accepted Answer · 2019-12-13 18:26:01Z

0

Got solution.

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

@user7566666 thanks for your help.

edited Dec 13, 2019 at 18:26

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Dec 13, 2019 at 11:41

user7566666

391 silver badge7 bronze badges

1 Comment

Nitheesh Over a year ago

What you are doing now is the manual operation for array.concat.

Collectives™ on Stack Overflow

Add new datas into existing scope-angularjs

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related