Search code examples
angularjsangular-ui

Editing tab names with double click in Angular UI

In this plunk I have an Angular UI tabset with tabs that are created dynamically.

My objective is to have the user double click on the tab name (tab heading), make the name editable, have the user change the name and press enter to exit edit mode.

I don't know how to approach this. Any ideas?

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>
Solution

  • Just add a property to your model that would indicate if the field is editable or not. Than simply react to user double-clicking (from angular) and pressing Enter (custom directive).

    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>