Solution 1 :

       <tr ng-repeat="cli in creativeGroupMarket">
            <td ng-show="cli.edit_mode">{{cli.GroupName}}</td>
            <td ng-show="!cli.edit_mode"><input ng-model="cli.GroupName"></td>
            <td>
                <a ng-click=cli.edit_mode=true>Edit</a>
                <a ng-click="deleteCreativeMarket(cli.GroupID)">Delete</a>
            </td>
        </tr>

Problem :

I have a Html Table

<div class="clearfix">
    <table class="table table-contract-module">
        <thead>
            <tr>
                <th>Group Name</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="cli in creativeGroupMarket">
                <td>{{cli.GroupName}}</td>
                <td>
                    <a>Edit</a>
                    <a ng-click="deleteCreativeMarket(cli.GroupID)">Delete</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

The Table Format Looks Like

enter image description here

Now When I Click Edit Button here I need user to be able to edit Group Name in textbox and Edit button should be replaced by Update.

After I Click Edit button on 1st row of the table the table should Look Like :-

enter image description here

How Can I do this?

Comments

Comment posted by Lex

You’ll have to write code – there’s no magic solution to this (unless you can find some type of component or directive that handles this for you). A common pattern for doing this is to add a boolean

By