How to create editable form using "Popover"

Asked

Viewed 318 times

1

How should I modify the code below to work with the class popover-wrapper angular-xeditable Demo.

var app = angular.module("app", ["xeditable"])
.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
})
.controller('Ctrl', function($scope) {
  $scope.targetIndex = -1;
  
  $scope.toggle = function(index){

    // Se o targetIndex atual for o mesmo do selecionado, então apague.
    // Caso contrário, salve o índice selecionado em targetIndex.

    $scope.targetIndex = ($scope.targetIndex == index ? null : index);
  }
  
  $scope.users = [
  {    name: 'awesome user I'  }, 
  {    name: 'awesome user II'  }, 
  ];
});
div[ng-app] { margin: 50px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.min.js"></script>
<script src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>

<h4>Angular-xeditable Text (Bootstrap 3)</h4>

<form ng-app="app" ng-controller="Ctrl" editable-form name="formulario">
  
  <div ng-repeat="user in users track by $index">
  <a href="#" ng-click="toggle($index)" ng-show="!(targetIndex == $index)" editable-text="user.name">{{ user.name || 'empty' }}</a>
  <input type='text' ng-model="user.name" ng-show="targetIndex == $index"/>
    <div class="buttons">
      <!-- buttons to submit / cancel form -->
      <span ng-show="targetIndex == $index">
        <br/>
        <button type="submit" class="btn btn-primary" ng-disabled="formulario.$waiting" ng-click="toggle($index)">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="formulario.$waiting" ng-click="toggle($index)">
          Cancel
        </button>
      </span>
    </div>
  <br />
  </div>
</form>

angularjs
  • 1

    Want the effect of the example or manipulate that event and display its own cancel and save button?

  • Hello @Felipeduarte, from the example.

1 answer

1

Missing you add two more dependencies: boostrap css and the xeditable css, also removed the form, for the api does all the work dynamically.

var app = angular.module("app", ["xeditable"])
.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
})
.controller('Ctrl', function($scope) {

  //Comentei esse trecho pois ele estava ocultando o botão
	
  //$scope.targetIndex = -1;
  
  //$scope.toggle = function(index){

    // Se o targetIndex atual for o mesmo do selecionado, então apague.
    // Caso contrário, salve o índice selecionado em targetIndex.

    //$scope.targetIndex = ($scope.targetIndex == index ? null : index);
  //}
  
  $scope.users = [
  {    name: 'awesome user I'  }, 
  {    name: 'awesome user II'  }, 
  ];
});
div[ng-app] { margin: 50px; }
.pop {
  margin:0;
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popover-wrapper:active{
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.min.js"></script>
<script src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://vitalets.github.io/angular-xeditable/dist/css/xeditable.css" rel="stylesheet"/>



<body ng-app="app" ng-controller="Ctrl">
<div ng-repeat="user in users track by $index" class="pop">
  <div class="popover-wrapper">
    <a href="#" ng-click="toggle($index)" ng-show="!(targetIndex == $index)" editable-text="user.name">{{ user.name || 'empty' }}</a>
  </div>
  </div>
</body>

  • 1

    Hello @Felipeduarte, I don’t know if you noticed, but the structure is inside a form, which makes its standard operation impossible.

  • Opa, pardon, I understood that I would like to reproduce the example of API, but anyway, your question is not very clear, it would be nice to reformulate it, so that everyone understood better.

  • Felipe, there is not much to detail, I want my example (with form) to be "equal" to demo (popup).

  • is still out there?

  • oops, you can talk

  • Could you help me with this chat question? @Felipeduarte

  • This schedule is difficult for me, but your question is the following, the API provides all the methods necessary to manipulate the requests, both Submit and Cancel, so it does not even allow the use of forms, because it would not have much sense, you can find the Submit method here https://vitalets.github.io/angular-xeditable/#onbeforesave

Show 2 more comments

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.