CODEWITHSUNDEEP
htmlangularjs
Kei
Kei

Reputation: 315

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

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

Sample

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">

Upvotes: 0

Views: 1309

Answers (2)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

Try the following code
In the button

    ng-click = "deleteProperty()"

In the controller

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

Upvotes: 0

Ahmad Abu Saa
Ahmad Abu Saa

Reputation: 808

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.

Upvotes: 1

Related Questions