在angularjs中创建一个可编辑的表行

Question

我必须修改表格中的一行

1. 点击该行
2. 点击修改按钮
3. 修改行
4. ＆＃34;修改＆＃34;按钮已变成＆＃34;保存＆＃34;按钮，按保存。

从我的角度控制器，我如何告诉表格使行可编辑？...不是哪个....但是如何。

Answer 1

如果你需要Angular 1，请试试这个

<tr>
    <td>Name</td>
    <td>Surname</td>
    <td><button>Modifiy</button></td>
<tr>

将其替换为

<tr>
    <td>
        <span ng-if="!isBeingModified">Name</span>
        <input ng-if="isBeingModified" type="text" value="Name">
    </td>
    <td>
        <span ng-if="!isBeingModified">Surname</span>
        <input ng-if="isBeingModified" type="text" value="Surname">
    </td>
    <td>
        <button ng-click="isBeingModified = !isBeingModified">
            <span ng-if="isBeingModified">Save</span>
            <span ng-if="!isBeingModified">Modify</span>
        </button>
    </td>
<tr>

Answer 2

鉴于你的行是

<tr>
    <td>Name</td>
    <td>Surname</td>
    <td><button>Modifiy</button></td>
<tr>

将其替换为

<tr>
    <td>
        <span *ngIf="!isBeingModified">Name</span>
        <input *ngIf="isBeingModified" type="text" value="Name">
    </td>
    <td>
        <span *ngIf="!isBeingModified">Surname</span>
        <input *ngIf="isBeingModified" type="text" value="Surname">
    </td>
    <td>
        <button (click)="isBeingModified = !isBeingModified">
            <span *ngIf="isBeingModified">Save</span>
            <span *ngIf="!isBeingModified">Modify</span>
        </button>
    </td>
<tr>