TheNickyYo TheNickyYo - 1 year ago 156
AngularJS Question

How to remove elements/nodes from angular.js array

I am trying to remove elements from the array

so that items are removed in the view
ng-repeat="item in items"

Just for demonstrative purposes here is some code:

if($scope.items[i].name == 'ted'){

I want to remove the 1st element from the view if there is the name ted right? It works fine, but the view reloads all the elements. Because all the array keys have shifted. This is creating unnecessary lag in the mobile app I am creating..

Anyone have an solutions to this problem?

Answer Source

There is no rocket science in deleting items from array. To delete items from any array you need to use splice: $scope.items.splice(index, 1);. Here is an example:


<!DOCTYPE html>
<html data-ng-app="demo">
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src=""></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <div data-ng-controller="DemoController">
        <li data-ng-repeat="item in items">
          <button data-ng-click="removeItem($index)">Remove</button>
      <input data-ng-model="newItem"><button data-ng-click="addItem(newItem)">Add</button>


"use strict";

var demo = angular.module("demo", []);

function DemoController($scope){
  $scope.items = [

  $scope.addItem = function(item){
    $scope.newItem = null;

  $scope.removeItem = function(index){
    $scope.items.splice(index, 1);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download