在Angular.js中单击图像按钮，使标题文本可编辑

Question

如何在单击angular.js中的图像按钮时编辑标题文本？另外如何保存更新的值？

<span style="white-space: pre-line">some text</span>

这里的id和text是动态的。

Answer 1

为此，您可以使用x-editable依赖项：https://vitalets.github.io/x-editable/

这是一个如何完成的例子：

<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
  <a href="#" editable-text="user.name">{{ user.name || 'empty' }}</a>
</div>

这是JS：

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };
});

见小提琴：

http://jsfiddle.net/emporio/h1zsw5nu/

以下是具体问题的解决方案：http://jsfiddle.net/emporio/c3kczqpr/