在 Angular.js 单页应用中，数据可编辑是一个基本的功能需求，但是实现起来可能会有一些困难。本文将介绍一些常用的数据可编辑解决方案，并提供示例代码和指导意义。
方案一：双向数据绑定
Angular.js 的双向数据绑定机制使得数据可编辑变得十分简单，只需要在 HTML 中使用 ng-model 指令即可。例如：
<input type="text" ng-model="person.name">
这样，当用户在输入框中输入内容时，person 对象中的 name 属性也会被自动更新。这种方式的优点是简单易用，但是对于复杂的数据结构和嵌套对象的处理可能会有些困难。
方案二：表单控件
表单控件是 Angular.js 中另一种可编辑数据的解决方案。通过使用 ng-form 指令，可以将表单控件绑定到一个对象上，实现数据的双向绑定。例如：
<form name="myForm" ng-submit="save()"> <input type="text" name="name" ng-model="person.name"> <input type="email" name="email" ng-model="person.email"> <button type="submit">保存</button> </form>
在这个例子中，当用户点击保存按钮时，表单数据将会被提交到 save() 方法中进行处理。
方案三：自定义指令
自定义指令是 Angular.js 中非常有用的功能，可以用于封装复杂的 UI 组件和行为。对于数据可编辑，可以编写一个自定义指令来实现。例如：
-- -------------------- ---- -------
------------------------- ---------- -
------ -
--------- ----
------ -
------ ----
------- ---
--
--------- ------------ ----------- ---------------------------- -------------------------------------
----- --------------- -
--------------- - ------------
---------- - ---------- -
----------- - ----------------
---------------
--
-
--
---这个指令可以通过以下方式使用：
<editable value="person.name" on-save="saveName()"></editable>
当用户点击保存按钮时，指令会将数据保存到 person.name 属性中，并调用 saveName() 方法进行处理。
总结
以上是 Angular.js 中常用的三种数据可编辑解决方案。双向数据绑定适用于简单的数据结构，表单控件适用于更复杂的数据结构，自定义指令适用于封装复杂的 UI 组件和行为。在实际开发中，可以根据需求选择合适的方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c71d2badd4f0e0ff1433f0