How to implement input group in to xeditable inline form?

Question

Is it possible to implement bootstrap input-group with in xeditable inline form ?

DEMO: http://codepen.io/anon/pen/bVBROO

Answer 1

    angular.module('xeditable').directive('editableInputGroup', ['editableDirectiveFactory',
      function(editableDirectiveFactory) {
        return editableDirectiveFactory({
          directiveName: 'editableInputGroup',
          inputTpl: '<div class="form-inline" style="width: 250px"><div class="input-group"><span class="input-group-addon" id="basic-addon1">#</span><input type="text"  class="form-control" placeholder="Name"  ng-model="$data" aria-describedby="basic-addon1" ></div></div>'
        });
    }]);

    (function() {
      var app;
      app = angular.module('app', ['xeditable']);
      app.run(function(editableOptions) {
        return editableOptions.theme = 'bs3';
      });
      app.controller('Ctrl', function($scope, $filter) {
        return $scope.user = {
          name: 'fun'
        };
      });
    }.call(this));

    <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>

    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"/>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.css"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js"></script>

    <link rel="stylesheet" type="text/css" href="//vitalets.github.io/angular-xeditable/dist/css/xeditable.css"/>
    <script src="//vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>




    <div ng-app="app" ng-controller="Ctrl" style="margin: 50px" class="container">
      <h4>Angular-xeditable demo</h4>
      <br /> My hash tag:
      <a href="#" editable-input-group="user.name">{{ user.name || 'empty' }}</a>
      <br>
      <br> debug: {{ user | json }}
    </div>