在 Angular UI 中双击编辑选项卡名称

Question

In this plunk 我有一个 Angular UI 标签集，其中包含动态创建的标签。

我的objective是让用户双击选项卡名称（选项卡标题），使名称可编辑，让用户更改名称并按回车键退出编辑模式。

我不知道该如何处理。有什么想法吗？

Javascript

  $scope.tabs = [
    { title:'Name 1', content: "Content 1" },
    { title:'Name 2', content: "Content 2" },
    { title:'Name 3', content: "Content 3" }
  ];

HTML

<uib-tabset>
   <uib-tab ng-repeat="t in tabs" heading="{{t.title}}" >
     {{t.content}}
   </uib-tab>
</uib-tabset>

Answer 1

只需在您的模型中添加一个属性来指示该字段是否可编辑。而不是简单地对用户双击（来自 angular）并按 Enter（自定义指令）做出反应。

http://plnkr.co/edit/1zOKx2NCXaCjnPHJB1rn?p=preview

<input type="text" ng-model="t.content" ng-readonly="t.disabled" ng-dblclick="t.disabled = false" my-enter="t.disabled = true"></input>

在 Angular UI 中双击编辑选项卡名称

Editing tab names with double click in Angular UI

angularjs

angular-ui