如何使用带有超过$ data的Angular-Xeditable的onBeforeSave/onAfterSave方法作为参数

Question

首次在我的应用程序中使用Angular-Xeditable时,我遇到了一个问题,试图弄清楚如何将x可编辑的更改保存到通过ng-repeat循环访问的对象.

该文档主要侧重于使用onbeforesave和onaftersave进行验证,虽然它确实表明它可用于保存内容,但这些示例并没有显示如何将超过$ data(或$ index)的内容传递给onbeforesave/onaftersave方法.样本显示保存类似$ scope.person,如果你有一个项目,这很好.

但如果30个列表中的第3个人被编辑怎么办？你当然不想要全部保存它们.如何只保存编辑的对象而不是数组中的所有内容？

Answer 1

Angular-Xeditable文档没有说清楚,但似乎$ data(和$ index)只是注入值,你可以将任何你想要的东西传递给save/validate方法.所以你应该做的是传递对象本身(或者只是它的id).

鉴于以下标记:

<div ng-repeat="p in people">
    <a href="#" editable-text="p.name" onaftersave="updatePerson(p)">{{p.name}}</a>
</div>

然后,您的控制器中将包含以下代码:

$scope.updatePerson = function(person) {
    var ret = PersonService.save(person); // or whatever save mechanism you use
    // You need to return a error string if save fails, true otherwise
    if (ret !== null) {  // You have to make sure this logic works for your save service
        return ret;
    }
    return true; 
}

有了这个,您可以随意处理保存.您不必仅使用Angular-Xeditable提供的$ data或$ index值.您可以轻松地执行以下操作:

<div ng-repeat="p in people">
    <a href="#" editable-text="p.name" onaftersave="updatePerson(p.id, p.name, p.dohickey)">{{p.name}}</a>
</div>

并仅更新具有提供的ID值的人员的名称和dohickey字段.当然,您必须更改updatePerson()方法,而不是将ID作为第一个参数,将名称和dohickey作为第2和第3个参数.

另请注意,如果您使用onBeforeSave而不是onAfterSave,那么p.name将不具有新值,您需要返回使用$ data来获取新值.