Как реализовать группу ввода в xeditable встроенной форме?

0

Возможно ли внедрить bootstrap input-group в xeditable встроенную форму?

ДЕМО: http://codepen.io/anon/pen/bVBROO

Изображение 174551

Теги:
twitter-bootstrap-3
x-editable

1 ответ

2
Лучший ответ

    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>
  • 0
    @MuhammedAthimannil обновил ответ
  • 0
    сейчас работает как угодно. позвольте мне задать вам еще один вопрос, который мы можем применить к ng-trim="false" ng-change="mytext = mytext.split(' ').join('')" ? Вот демоверсия с вашим ответом codepen.io/anon/pen/rOjwGg
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню