Delete property from scope variable

Question

I have a scope variable $scope.object = { prop: 12345 } whose properties I delete with setting them to undefined.

<button ng-show="object.prop" ng-click="object.prop = undefined"/>

Is there a possibility to delete a properties from within a template and without an additional function in the controller instead of setting their values to undefined?

Do you want to delete specific property from the object or all of them? — Amir, Nov 25 '14 at 12:11
@AmirAl: A specific property anywhere inside of the object. For example at path "object.prop.foo[2].bar". — Sebastian Barth, Nov 25 '14 at 12:17
@AmirAl: It's not a duplicate since we are talking about AngularJS template code not Javascript Code. — Sebastian Barth, Nov 25 '14 at 12:18

score 12 · Answer 1 · answered Nov 25 '14 at 13:04

12

use codes below to delete a property from a object

In HTML

<button ng-show="object.prop" ng-click="deleteProperty()" />

In Controller

$scope.deleteProperty = function() {
    delete $scope.object.prop;
}

answered Nov 25 '14 at 13:04

Kalhan.Toress

21,683
8
68
92

That is not convenient way to do it because if you want to delete other properties in the object you can't do with such method. According to your method you can delete only prop named property in the object. – Amir Nov 25 '14 at 13:28
Doesn't answer the question since this involves controller functions. – Sebastian Barth Nov 25 '14 at 13:41

Giwwel · Answer 2 · 2014-11-25T13:13:26.250

0

Yes... I.e. that you can change the value of the variable ... Maybe it will be a help for you

try this:

 <button ng-show="object.prop" ng-click="object.prop = 'undefined'"/>

or you can clear the value...

 <button ng-show="object.prop" ng-click="object.prop = ''"/>

also you can set the value to null

 <button ng-show="object.prop" ng-click="object.prop = null"/>

edited Nov 25 '14 at 13:13

answered Nov 25 '14 at 12:42

Giwwel

347
1
4

1

That would change the property to a `string` with the value `"undefined"` or `""`. So this does not delete anything. – Sebastian Barth Nov 25 '14 at 12:52
also you can set the value to null `` – Giwwel Nov 25 '14 at 13:12
It's still existing then. – Sebastian Barth Nov 25 '14 at 13:40
@Ted, are you able to use Underscore.js library? – Amir Nov 25 '14 at 13:44
@Amir: Only AngularJS. :'( – Sebastian Barth Nov 25 '14 at 13:45
@Ted I have added an answer, but it requires Underscore.js – Amir Nov 25 '14 at 13:52

Amir · Answer 3 · 2014-11-25T15:19:24.650

Here's the way that you can delete any property name from the object of scope. This method require using Underscore.js library.

index.html

//Underscore.js must be imported
<script src="path/to/underscore/underscore-min.js"></script>

//Replace prop with any property name
<button ng-click="removeMyProperty(object, 'prop')">Test</button>

Controller

$scope.object = {"prop": "test", "anotherProp" : 10};
$scope.removeMyProperty = function(variable, propName){
    var keys = _.keys(variable);
    _.each(keys, function(data){
        if(data === propName){
            $scope.object = _.omit(variable, propName);
        }
        else {
            console.log("No such property name in array!");
        }
    });
};

This works only when you use Underscore.js library and thus you must add it to your project classpath and import underscore.js file in index.html

If you are not familiar with Underscore, please go here Underscore.js

Andrew Clavin · Answer 4 · 2015-04-17T20:20:29.503

0

If the object is always at a point that you know what properties it would have besides the one you are deleting you could try something like:

<button ng-show="object.prop" ng-click="object = {otherProp1: object.otherProp1, otherPropN: object.otherPropN}"/>

edited Apr 17 '15 at 20:20

answered Apr 17 '15 at 20:08

Andrew Clavin

574
2
15

score 0 · Answer 5 · edited May 23 '17 at 10:31

I think that you can't do that. I tried using "delete" operator, something like ng-click="delete object.prop". But it turns out that AngularJS expressions are limited and this gives me a $parse error while compiling the template, so you would have to write that in controller in order to completely delete it, unfortunately.

But if you want to avoid the controller at all means, setting the property to undefined might be a better idea, read the answer by Dan in this question: How do I remove a property from a JavaScript object?

Delete property from scope variable

5 Answers5