Javascript 通过单击AngularJs中的按钮，将标签替换为输入文本框，反之亦然

我有一个带有标签和按钮编辑的表单，当我点击按钮时，标签应转换为文本框，标签数据为文本，当我保存它时，文本框应再次转换为标签

我们如何用AngularJs接近？有谁能提供一些这方面的信息吗

html:

---

您可以使用

ngshow

和

ngHide

显示/隐藏标签和输入
基本上，

应该包含一个显示数据的表达式，相应的

应该包含指向相同数据的

ngModel

。然后使用按钮简单地在显示模式之间切换：

angular.module（'test'，[]）.controller（'testCtrl'，function（$scope）{
$scope.editMode=false；
$scope.name=“John Doe”；
});

{{name}}
编辑
拯救
您可以使用
ngshow
和
ngHide
显示/隐藏标签和输入

基本上，
应该包含一个显示数据的表达式，相应的
应该包含指向相同数据的
ngModel
。然后使用按钮简单地在显示模式之间切换：


angular.module（'test'，[]）.controller（'testCtrl'，function（$scope）{
$scope.editMode=false；
$scope.name=“John Doe”；
});

{{name}}
编辑
拯救
您可以在
标签
标记中使用
contenteditable
属性

查看此演示：


（函数（）{
“严格使用”；
var-app=angular.module（“app”，[]）；
app.controller（“controller”、[“$scope”，
职能（$范围）{
$scope.buttonText=“编辑”；
$scope.editSave=函数（evt）{
var label=evt.target.previousElementSibling；//从按钮获取标签标签。
var labelData=label.innerText；//获取标签文本。
警报（labelData）；
如果（$scope.buttonText==“Edit”）{//如果当前按钮的文本为“Edit”。。。
label.setAttribute（“contenteditable”，true）；//为标签设置contenteditable=true。
/*使可编辑标签可聚焦*/
label.setAttribute（“目标”，0）；
label.focus（）；//在标签中设置焦点。
$scope.buttonext=“Save”；//将按钮的文本更改为“Save”。
}否则{
label.removeAttribute（“内容可编辑”）；
标签。删除属性（“目标”）；
$scope.buttonText=“编辑”；
}
};
}
]);
})();
标签{
填充：2px；
}
标签[contenteditable=true]{
边框：实心1px#中交；
填充：2px；
}

标签
您可以在
标签
标记中使用
contenteditable
属性

查看此演示：


（函数（）{
“严格使用”；
var-app=angular.module（“app”，[]）；
app.controller（“controller”、[“$scope”，
职能（$范围）{
$scope.buttonText=“编辑”；
$scope.editSave=函数（evt）{
var label=evt.target.previousElementSibling；//从按钮获取标签标签。
var labelData=label.innerText；//获取标签文本。
警报（labelData）；
如果（$scope.buttonText==“Edit”）{//如果当前按钮的文本为“Edit”。。。
label.setAttribute（“contenteditable”，true）；//为标签设置contenteditable=true。
/*使可编辑标签可聚焦*/
label.setAttribute（“目标”，0）；
label.focus（）；//在标签中设置焦点。
$scope.buttonext=“Save”；//将按钮的文本更改为“Save”。
}否则{
label.removeAttribute（“内容可编辑”）；
标签。删除属性（“目标”）；
$scope.buttonText=“编辑”；
}
};
}
]);
})();
标签{
填充：2px；
}
标签[contenteditable=true]{
边框：实心1px#中交；
填充：2px；
}

标签
请提供一个到目前为止您的更近距离尝试的示例。这样我们就可以一起帮助解决这个问题。请提供一个迄今为止您更接近的尝试的例子。这样我们就可以一起帮助解决这个问题。
<form ng-app="testApp" ng-controller="testController">
    <label class="keyColumn">name: </label>
    <label class="valueCoulmn">stackover flow </label>
    <button ng-click="editLabel">Edit</button>
</form>