Removing Angular scope upon splice operation

Question

Removing Angular scope upon splice operation

Why does my entire list get destroyed when trying to remove an item using splice in JavaScript?

HTML:

<ul class="nav nav-tabs">
  <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
      <a href="" ng-click="select(pane)">
          {{pane.title}}&nbsp;
          <sup ng-click="close(pane)">x</sup>
      </a>
  </li>
  <li>
      <a href="" ng-click="createPane()">+</a>
  </li>
</ul>

JS

.controller('editCtrl', ['$scope', function($scope){

    $scope.panes = [];
    var ctrl  = this;

    $scope.select = function(pane) {
      angular.forEach($scope.panes, function(pane) {
        pane.selected = false;
      });
      pane.selected = true;
    };

    this.addPane = function(pane) {
      if ($scope.panes.length === 0) {
        $scope.select(pane);
      }
      $scope.panes.push(pane);
    };
  
    $scope.createPane = function() {
        var pane = {
            title: 'untitled',
            content: 'Scope:'+$scope.$id
        }
        ctrl.addPane(pane);
    };

    $scope.close = function(pane) {
        var idx = $scope.panes.indexOf(pane);
        
        if (idx != -1) $scope.panes.splice(idx, 1); 
    }

}]);

I am specifically focused on the close method and looking for a solution.

javascript angularjs splice

Answer 1

Answer №1

It seems that your list remains intact.

However, the presence of href="" in those <a> tags causes the entire page to refresh when clicking the x icon.

To prevent this, try eliminating the href attribute like so:

<ul class="nav nav-tabs">
  <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
      <a ng-click="select(pane)">
          {{pane.title}}&nbsp;
          <sup ng-click="close(pane)">x</sup>
      </a>
  </li>
  <li>
      <a ng-click="createPane()">+</a>
  </li>
</ul>

I hope this solution proves helpful.

Answer 2

It seems that your list remains intact.

However, the presence of href="" in those <a> tags causes the entire page to refresh when clicking the x icon.

To prevent this, try eliminating the href attribute like so:

<ul class="nav nav-tabs">
  <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
      <a ng-click="select(pane)">
          {{pane.title}}&nbsp;
          <sup ng-click="close(pane)">x</sup>
      </a>
  </li>
  <li>
      <a ng-click="createPane()">+</a>
  </li>
</ul>

I hope this solution proves helpful.

Answer 3

Answer №2

When you pass the index of the pane to be removed using $index as the parameter for your close($index) function, you're already indicating which pane should be closed.

Therefore, your close function should be structured like this:

$scope.close = function(i){
    var removedPane = $scope.panes.splice(i,1);
    // Here you can perform additional actions with the "removedPane" if needed
};

This particular line

var idx = $scope.panes.indexOf(pane);

attempts to locate the index of the position being passed to the function, resulting in idx likely being undefined.

EDIT

To correctly call the close function, use the following syntax:

`ng-click="close($index)"`

Answer 4

When you pass the index of the pane to be removed using $index as the parameter for your close($index) function, you're already indicating which pane should be closed.

Therefore, your close function should be structured like this:

$scope.close = function(i){
    var removedPane = $scope.panes.splice(i,1);
    // Here you can perform additional actions with the "removedPane" if needed
};

This particular line

var idx = $scope.panes.indexOf(pane);

attempts to locate the index of the position being passed to the function, resulting in idx likely being undefined.

EDIT

To correctly call the close function, use the following syntax:

`ng-click="close($index)"`

Removing Angular scope upon splice operation

Answer №1

Answer №2

Similar questions

How can I refresh the information without appending it to the existing table using JavaScript and jQuery?

Testing the revised react component through unit testing with jest and enzyme

Delete a specific element within an Angular component by utilizing Angular or Jquery through an ng-click event handler

Calculating the combined cost of items in the shopping cart

The functionality of Angular binding appears to be experiencing issues when used in conjunction with ngIn

Having trouble generating an image with JavaScript

Having difficulty invoking JavaScript code from PHP

Expand the capabilities of a jQuery plugin by incorporating new functions or modifying existing ones

Vue alert - Cannot access indexOf property of a value that is undefined

What is the best way to activate tooltip visibility on a mobile device?

Tips for creating a mirrored image on an IcosahedronGeometry using three.js

What is an effective method for coordinating JQuery animations simultaneously?

Issue with Access Denied Error in Internet Explorer 11 when Using AngularJS

Preserve present condition following a jQuery click event

Issue with Bootstrap4 Carousel not scrolling horizontally

Searching for specific values within a date range in MongoDB, focusing on particular times of the day

Tips for configuring Visual Studio Code to utilize path mappings for handling automatic imports

JavaScript file slicing leads to generating an empty blob

Validating whether another element is checked when a radio button is unchecked

iOS 10.3.1 causing Ionic 2 (click) event to trigger twice