AngularJS Delete property from object when triggering ng-click()

Question

Suppose I have a set of values I want to mess with, say:

And if you noticed, there is a pencil there. I want to be able to edit the value of that cell in-line, which will show an input which I can key in a new value for that cell, simple. This is what I am using to make this possible:

<td ng-show="showThisColumn(1)==true" class="text-center"
    ng-mouseenter="employee.nameEditing = true"
    ng-mouseleave="employee.nameEditing = false">
    <span ng-hide="employee.nameEditor">{{employee.firstName + ' ' + employee.lastName}}</span>
    <i class="fa fa-pencil e-icon" ng-show="employee.nameEditing && !employee.nameEditor"
       ng-click="employee.nameEditor = true"></i>
    <div class="form-group-sm">
        <input type="text" class="form-control input-sm" ng-model="employee.firstName"
               ng-show="employee.nameEditor">
    </div>
    <div class="form-group-sm">
        <input type="text" class="form-control input-sm" ng-model="employee.lastName"
               ng-show="employee.nameEditor">
    </div>
    <div class="form-group-sm">
        <i class="fa fa-check f-icon" ng-show="employee.nameEditor"
           ng-click="employee.nameEditor = false; editEmployee(employee)"></i>
        <i class="fa fa-times f-icon" ng-show="employee.nameEditor"
           ng-click="employee.nameEditor = false"></i>
    </div>
</td>

Doesn't seem too bad, but here's the problem. If I don't delete the properties nameEditor and nameEditing, the back-end will throw me 400 BAD REQUEST in which the object that I'm posting is syntactically incorrect. Now imagine the number of DELETE obj.prop lines I need to write.

This is what I tried, and without asking, this doesn't work.

ng-click="delete employee.nameEditor; delete employee.nameEditing;"

Any inputs?

EDIT: If I load all of my DELETE statements for each column cell, then It will throw me an error when I'm editing say, Cell A and it tries to delete a property that is injected when I'm editing Cell B. Another workaround is to make multiple methods and do it like this: ng-click="deleteNameEditor()" but that is too much work, in my opinion.

EDIT2: This is my ng-repeat for the table in case it is not clear that I'm looping each row with pre-set values.

<tr ng-repeat="employee in employees | filter: search track by $index">

Nikolay Mihaylov · Accepted Answer · 2016-09-01 07:04:16Z

1

I think you can just do this:

ng-click="employee.nameEditor = undefined; 
employee.nameEditing = undefined;

and if you are using $http angular service to make the request to back end, it will automatically eliminate the fields with undefined values.

edited Sep 1, 2016 at 7:04

Nikolay Mihaylov

3,9028 gold badges29 silver badges33 bronze badges

answered Sep 1, 2016 at 6:44

Ahmad Abu Saa

8287 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kei Over a year ago

Nice! For some reason, that didn't work before. But it works now, thanks, mate!

Artiom · Accepted Answer · 2016-09-01 07:06:34Z

0

Try the following code
In the button

    ng-click = "deleteProperty()"

In the controller

    $scope.deleteProperty = function() {
       delete $scope.employee.nameEditor;
       delete $scope.employee.nameEditing;
    }

edited Sep 1, 2016 at 7:06

Artiom

7,8673 gold badges40 silver badges46 bronze badges

answered Sep 1, 2016 at 5:37

Pritish Vaidya

22.3k4 gold badges62 silver badges78 bronze badges

2 Comments

Pritish Vaidya Over a year ago

if you want to avoid the use of the controller then you can also set the property of the object to be undefined.

Kei Over a year ago

I saw both solutions from googling around, not the best. Besides, If I load all of my DELETE statements in that function, then what happens if one of the statements, say in this case, employee.dobEdior is nonexistent? That will throw me an error, and if I load multiple functions for each column, that's too much work.

Collectives™ on Stack Overflow

AngularJS Delete property from object when triggering ng-click()

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related