How to delete elements of array in angularJs

Question

In view I defined a button like -> <button class="btn btn-default" ng-click="reset(path)">Reset</button>

And I want this function to reset an array which has been defined inside the controller.

Controller Code

app.controller('mainCtrl',function(NgMap,$scope){
	 var vm = this;
	    $scope.path = [];
	    vm.addMarkerAndPath = function(event) {
	      $scope.path.push([event.latLng.lat(), event.latLng.lng()]);
	      console.log($scope.path);
	    };
	    
	    $scope.reset = function(){
	 
	    	$scope.path.length=0;
            $scope.path =[]; // also tried this but didn't work
	    }
});

Html Code

<div class="panel panel-default" ng-controller="srmmobileHoardingCtrl as vm">
	<div class="panel-heading">
		Save Path for hoarding Advertisement
	</div>
<ng-map zoom="7" center="41.879535, -87.624333" on-click="vm.addMarkerAndPath()">
    <shape name="polyline" id="foo"
      path="{{path}}"
      stroke-color="#FF0000"
      stroke-opacity="1.0"
      stroke-weight="3">
    </shape>
  </ng-map>
  <div class="panel-body">
  	<Button class="btn btn-default">Save</Button>
  	<button class="btn btn-default" ng-click="reset()">Reset</button>
  </div>
  
  </div>

Can you please add the html code, or better try to create a plunkr or fiddler. — Diana R
– Diana R, Commented Nov 17, 2015 at 12:21
It looks like you are using both $scope and the controllerAs syntax to bind your data. Bad idea. — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented Nov 17, 2015 at 12:26
@DeblatonJean-Philippe Actually I'm new to angularJs so could you suggest me some better way — Anonymous
– Anonymous, Commented Nov 17, 2015 at 12:29
Additionally to what @DeblatonJeanPhilippe mentioned, you define the controller('mainCtrl' but in html you use ng-controller="srmmobileHoardingCtrl as vm" which points co a different controller. — Diana R
– Diana R, Commented Nov 17, 2015 at 12:29
@DeblatonJean-Philippe then Can you please suggest me how to call addMArkerAndPAth function without vm. I tried to use $scope but it didn't work. — Anonymous
– Anonymous, Commented Nov 17, 2015 at 12:35

Emir Marques · Accepted Answer · 2015-11-17 12:56:03Z

2

Use the slice for remove elements.

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var fruits = fruits.slice(1, 3);

When you use fruits = [] or fruits = new Array() lose the internal reference used by the angular.

answered Nov 17, 2015 at 12:56

Emir Marques

2,6772 gold badges18 silver badges22 bronze badges

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

4 Comments

Appeiron Over a year ago

If you need to empty whole array and prevent js loosing actual link to an Object you should use Object.assign(fruits, [])

Emir Marques Over a year ago

Cool, did not know what can be done well . I generally use the array.slice (0, array.length )

Appeiron Over a year ago

It's black magic of ECMAScript 6. developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

Anonymous Over a year ago

@EmirMarques I knew this but I was making mistake while array initialization.

Anonymous · Accepted Answer · 2015-11-18 04:17:01Z

Thanks For your responses!!

And I don't know why some one has down voted my question. :/

I was making a very silly mistake. In starting I was not initializing my path array properly. i.e my path array contains objects and each object contains [lat,lng].

$scope.path = [[,]]; //I initialized this way and now everything is working pretty well.

Controller Code

'use strict';

app.controller('mainCtrl',function($scope,NgMap){
    $scope.path = [[,]];
    
    $scope.addMarkerAndPath = function(event) {
      $scope.path.push([event.latLng.lat(), event.latLng.lng()]);
      console.log($scope.path);
    };
    
    $scope.reset = function(){
    	console.log("reset function has been called");
    	console.log($scope.path);
    	console.log($scope.path.length);
    	$scope.path.slice(0,$scope.path.length);
    	$scope.path = [[,]];;
    	console.log("path array ");
    	console.log($scope.path);
    }
});

<div class="panel panel-default" ng-controller="mainCtrl">
	<div class="panel-heading">
		Save Path for hoarding Advertisement
	</div>
<ng-map zoom="7" center="41.879535, -87.624333" on-click="addMarkerAndPath()">
    <shape name="polyline" id="foo"
      path="{{path}}"
      stroke-color="#FF0000"
      stroke-opacity="1.0"
      stroke-weight="3">
    </shape>
  </ng-map>
  <div class="panel-body">
  	<Button class="btn btn-default">Save</Button>
  	<button class="btn btn-default" ng-click="reset()">Reset</button>
  </div>
  
  </div>

P.S It also works pretty fine if I use

var vm = this; through out the controller

Collectives™ on Stack Overflow

How to delete elements of array in angularJs

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related