CODEWITHSUNDEEP
arraysangularjs
Anonymous
Anonymous

Reputation: 181

How to delete elements of array in angularJs

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>

Upvotes: 0

Views: 119

Answers (2)

Anonymous
Anonymous

Reputation: 181

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

Upvotes: 0

Emir Marques
Emir Marques

Reputation: 2687

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.

Upvotes: 2

Related Questions