How to Remove an Item from an Array in Angularjs Scope

How to remove an item from an array in AngularJS scope?

Your issue is not really with Angular, but with Array methods. The proper way to remove a particularly item from an array is with Array.splice. Also, when using ng-repeat, you have access to the special $index property, which is the current index of the array you passed in.

The solution is actually pretty straightforward:

View:

<a ng-click="delete($index)">Delete</a>

Controller:

$scope.delete = function ( idx ) {
var person_to_delete = $scope.persons[idx];

API.DeletePerson({ id: person_to_delete.id }, function (success) {
$scope.persons.splice(idx, 1);
});
};

How to remove element from array using angularjs?

You can use delete

delete $scope.array[0].id;

Removing items from an array with Angular

You can pass an $index in your click function like this.

<i class="fa fa-times" ng-click="removeGalleryItem(galleryItem, $event , $index)">

and use $scope.galleries.splice(index, 1); inside your click function removeGalleryItem, make sure you have index parameter too like this.

$scope.removeGalleryItem = function(gallery , event, index){
$scope.galleries.splice(index, 1);
};

Hope this helps..

How to remove the angular scope array values using key name?

seems like you need to remove the objectAttributeDataTypeId from the first element of the array which is a object.

so what you need is,

$scope.attributes[0] // get the first element of the array
$scope.attributes[0].DataTypeName // get the DataTypeName attribute of the object
delete $scope.attributes[0].DataTypeName; // delete the property.

so all you need is,

delete $scope.attributes[0].DataTypeName;

How delete object in array Angular JS?

I'm going to simplify your data structure just a bit, for clarity. I'm also going to assume that the $$hashKey can be used to determine whether the object to be removed is the same as one in the list -- if that's not the case, and we need to compare all the keys and parameters within the objects, the answer gets quite a bit more complex.

Given those assumptions, here is a vanilla javascript version that should work in all current browsers:

var list = [    {$$hashKey: 1,  artist: "Alice"},    {$$hashKey: 42, artist: "Bob"},    {$$hashKey: 25, artist: "Charlie"}];
var itemToRemove = {$$hashKey: 42, artist: "Bob"};
for (var i=0; i<list.length;i++) { if (list[i].$$hashKey == itemToRemove.$$hashKey) { list.splice(i,1); // removes the matched element i = list.length; // break out of the loop. Not strictly necessary }}
console.log(list);

How to remove elements/nodes from angular.js array

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:

HTML

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

JavaScript

"use strict";

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

function DemoController($scope){
$scope.items = [
"potatoes",
"tomatoes",
"flour",
"sugar",
"salt"
];

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

$scope.removeItem = function(index){
$scope.items.splice(index, 1);
}
}

Can't remove element from scope array AngularJS

$scope.datas is an object literal and therefore has no indexOf or splice methods.

If you would like to remove a property from your object by key you could use something like the following.

$scope.remove = function(key){
if($scope.datas.hasOwnProperty(key)){
delete $scope.datas[key];
}
};

Removing a value from an array and moving them to another Array

In your html import data to your removeRoles(data) function:

<button ng-click="removeRoles(data)">
<i class="remove glyphicon glyphicon-remove-sign"></i>
</button>

In your controller:

$scope.removeSelection = function(data) {
$scope.multiRoles.splice($scope.multiRoles.indexOf(data), 1);
$scope.role.push(data);
$scope.rolesAdded = $scope.multiRoles.length === 0 ? false : true;
};

Code here. Hope this helps.



Related Topics



Leave a reply



Submit