CODEWITHSUNDEEP
angularjs
Ritesh Gupta
Ritesh Gupta

Reputation: 171

Update row in Angular JS

I am submiting a form using Angular JS and Web service. Here is code-

<table>
    <tr>
        <td style="text-align: right;">Name :
        </td>
        <td>
            <input type="text" id="txtEmpName" ng-model="EmpName" />
        </td>
    </tr>
    <tr>
        <td style="text-align: right;">Age :
        </td>
        <td>
            <input type="text" id="txtEmpAge" ng-model="EmpAge" />
        </td>
    </tr>
    <tr>
        <td style="text-align: right;">City :
        </td>
        <td>
            <input type="text" id="txtEmpCity" ng-model="EmpCity" />
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center;">
            <input type="submit" id="btnSubmit" value="Submit" />
        </td>
    </tr>
</table>

I want to make these text boxes reusable on Edit i.e. on edit click corresponding rows item must be filled and the Save button should now be working like Update button. How can I do it? Alternatively How can I make row editable?

Upvotes: 0

Views: 480

Answers (1)

Saneesh B
Saneesh B

Reputation: 612

Ideally you would wanna create the models as Employee.Name , Employee.Age , Employee.City

Now

    <table>
    <tr>
        <td style="text-align: right;">Name :
        </td>
        <td>
            <input type="text" id="txtEmpName" ng-model="Employee.Name" />
        </td>
    </tr>
    <tr>
        <td style="text-align: right;">Age :
        </td>
        <td>
            <input type="text" id="txtEmpAge" ng-model="Employee.Age" />
        </td>
    </tr>
    <tr>
        <td style="text-align: right;">City :
        </td>
        <td>
            <input type="text" id="txtEmpCity" ng-model="Employee.City" />
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center;">
            <button type="button" id="btnSubmit" ng-click="saveEmployee()">{{Employee.id ? "Edit" : "Create"}}</button>
        </td>
    </tr>
</table>

In the Controller

    $scope.saveEmployee = function(){
        if($scope.Employee.id){
             // Id will be present for a existing employee
            // update the Employee
          }else {
             // Id not present
             // create the employee              
          }
    }

I would have an Employee.save() in the model which can identify weather to save or update the Employee

Upvotes: 1

Related Questions