How do I change the code below to work with the% class of 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><scriptsrc="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-xeditableText(Bootstrap3)</h4><formng-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>