Angular Bootstrap UI: Input Fields in Tab-Heading

Question

Again I got a Problem with Angular Bootstrap UI Tabs. Short description of my problem: I want the user to create different pages with different titles. After a page is created, I create a new tab with the pagetitle and user can add content. That works fine so far. Now, in the uib-tab-heading I have an option to edit the page-title

<uib-tab-heading>
    <div class="pull-left">
        <span data-ng-if="!editable[$index]">{{title}}</span>
        <input data-ng-if="editable[$index]" data-ng-model="titles[$index]">
    </div>
    <div class="pull-right">
        <button data-ng-if="!editable[$index]" data-ng-click="edit($index)"><span class="glyphicon glyphicon-wrench"></span></button>
        <button data-ng-if="editable[$index]" data-ng-click="save($index)"><span style="color:green;" class="glyphicon glyphicon-ok"></span></button>
    </div>
    <div style="clear:both;"></div>
</uib-tab-heading>

The button action sets a variable so the input field in the tab appears. That works so far. But in the input field I only can edit one single letter, then, after input, the input field looses its focus and the tab is changed in a random way.

Is there a common method to disable keyboard interaction with the tabs so I can change the value of the input field without getting the tab changed?

masa · Accepted Answer · 2015-12-15 22:01:43Z

1

One option is just to force the focus back to the input element whenever it is modified.

See fiddle: https://jsfiddle.net/masa671/2mq3106a/

Markup:

<input data-ng-if="editable[$index]" ng-model="titles[$index]" focus-me>

JavaScript:

.directive('focusMe', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attr, ngModel) {
            scope.$watch(function () {
                return ngModel.$modelValue;
            }, function() {
                elem[0].focus();
            });
        }
    };
});

answered Dec 15, 2015 at 22:01

masa

2,8303 gold badges26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2015-12-16 15:43:46Z

Thanks for your answer!

I modified your fiddle a bit to fit my code.

See fiddle: https://jsfiddle.net/2mq3106a/7/

<div ng-controller="MyCtrl">
  <uib-tabset>
      <uib-tab class="tabcontent-bordered" data-ng-repeat="pageTitle in titles">
          <uib-tab-heading>
              <div class="pull-left">
                  <span data-ng-if="!editable[$index]">{{pageTitle}}</span>
                  <input id="$index" data-ng-if="editable[$index]" ng-model="titles[$index]" focus-me>
              </div>
              <div class="pull-right">
                  <button data-ng-if="!editable[$index]" data-ng-click="edit($index)"><span class="glyphicon glyphicon-wrench"></span></button>
                  <button data-ng-if="editable[$index]" data-ng-click="save($index)"><span style="color:green;" class="glyphicon glyphicon-ok"></span></button>
              </div>
             <div style="clear:both;"></div>
          </uib-tab-heading>
          I am on Tab {{$index}}
      </uib-tab>
  </uib-tabset>
</div>

I do not lose the focus on the input field, thats works so far, but there is still an other problem. As you may can see in the fiddle if i change input value of the input field, the other tab gets active state and so the content of the other tab is shown.

Collectives™ on Stack Overflow

Angular Bootstrap UI: Input Fields in Tab-Heading

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related