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
How to Break Line in JavaScript
How to Get Old Value with Onchange() Event in Text Box
JavaScript Error Null Is Not an Object
Ckeditor: Class or Id for Editor Body
What Is the Most Efficient Way to Parse a CSS Color in JavaScript
Changing Pseudo-Element Style from JavaScript
How to Remove "Disabled" Attribute Using Jquery
How to Access a JavaScript Variable Using a String That Contains the Name of the Variable
Mismatched Anonymous Define() Module
Cross-Browser Method to Determine Vertical Scroll Percentage in JavaScript
Cannot Access CSSrules from Local CSS File in Chrome 64
What Events Does an <Input Type="Number" /> Fire When Its Value Is Changed
Js: Get Array of All Selected Nodes in Contenteditable Div
Add CSS Styled Marker to Google Maps
JavaScript Incapable of Getting Element's Max-Height via Element.Style.Maxheight