Как сделать редактирование табличных данных onClick в HTML, используя AngularJS?

Question

У меня есть Html Таблица

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

Формат таблицы выглядит как

Теперь, когда я нажимаю кнопку «Изменить», мне нужно, чтобы пользователь мог редактировать Имя группы в текстовом поле, а кнопку «Изменить» следует заменить на «Обновить».

После того, как я нажал кнопку «Изменить» в 1-й строке таблица таблица должна выглядеть следующим образом: -

Как я могу это сделать?

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