角型UIでダブルクリックしてタブ名を編集する

Question

In this plunkタブが動的に作成される角度UIタブセットがあります。

私の目的は、タブ名（タブ見出し）をダブルクリックし、名前を編集可能にし、ユーザーに名前を変更させ、編集モードを終了するためにEnterキーを押すようにします。

私はこれにどのようにアプローチするのか分かりません。何か案は？

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

ただ、フィールドが編集可能であるかどうかを示すでしょう、あなたのモデルにプロパティを追加します。ユーザーがダブルクリック（角度から）して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>