AngularJS et X-editable bootstrap
Bonjour,
je développeme une appliction avec Cakephp 3.x, Angulajs 1.5, bootstrap x-editable.
sur une page j'ai un menu déroulant ou un utilisateur choisit une caisse et la page est rafraichit par la liste des adhérents correspondants au choit. jusqu'ici tout va bien j'affiche la liste avec angularjs, mais le soucis est que dans l'afichage, j'aimerai intégré un input x-editable de telle sorte que l'on puisse après un click entrer des valeurs dans le x-editable. ce que je n'arrive pas à faire car dans la boucle qui affiche les données le x-editable ne fonctionne pas par contre lorsqu'il est hors la bouble il fonctionne.
.
Ce que je fais
voici ce que j'ai dans ma vue:
<?= $this->assign('title', __d('admin','Cotisation')); ?>
<?php echo $this->start('css'); ?>
<?php $root = "/tontine"; ?>
<?php
echo $this->Html->css([
"../vendor/plugins/magnific/magnific-popup",
"../assets/admin-tools/admin-plugins/admin-modal/adminmodal",
"../vendor/editors/summernote/summernote",
"../vendor/editors/summernote/summernote-bs3",
"../vendor/editors/markitup/skins/simple/style",
"../vendor/editors/markitup/sets/default/style",
"../vendor/editors/xeditable/css/bootstrap-editable",
"../vendor/editors/xeditable/inputs/address/address",
"../vendor/editors/xeditable/inputs/typeaheadjs/lib/typeahead.js-bootstrap"
],['inline' =>true]);
?>
<?php echo $this->end(); ?>
<div class="row" ng-controller="cotisationCtrl" >
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="col-lg-2 col-md-4 col-xs-12">
<?= $this->Form->create(); ?>
<?php echo $this->Form->input('caisse',['class'=>'form-control','type'=>'select','label'=>false,'div'=>false,'tabindex' =>1,'options' => $caisse,'empty' => 'Choisir une caisse','ng-change'=>'listeCaisse()','data-ng-model' => 'form.choixcaisse']); ?>
<?= $this->Form->end();?>
</div>
</div>
</div>
<div class="row" id="modal-content">
<div class="col-md-12 col-lg-12" >
<br>
<div class="panel panel-dark" >
<div class="panel-heading">
<div class="panel-title hidden-xs">
<span class="glyphicon glyphicon-tasks"></span>Liste des adhérents par caisse</div>
</div>
<div class="panel-body pn " ng-show="filteredItems > 0">
<p> </p>
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="form-group">
<label for="inputStandard" class="col-lg-3 control-label">Recherche</label>
<div class="col-lg-8">
<input type="text" ng-model="search" ng-change="filter()" placeholder="Recherche...." class="form-control" />
</div>
</div>
</div>
<div class="col-md-3">
<span>Recherche <label class="label label-primary">{{ filtered.length }}</label> sur <label class="label label-default">{{ totalItems}} </label> total adhérent</span>
</div>
</div>
<p> </p>
<table class="table table-bordered table-hover display" cellspacing="0" width="100%" id="xedit-demo">
<thead>
<tr>
<th>Photo</th>
<th>Nom</th>
<th>Prénom</th>
<th>Téléphone</th>
<th>Date inscription</th>
<th>Opération</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse)">
<td>
<img src="<?php echo $root;?>/img/{{data.user.avatar}}" class="img-responsive" width="100" alt=""/>
</td>
<td>{{data.user.nom}}</td>
<td>{{data.user.prenom}}</td>
<td>{{data.user.phone_number}}</td>
<td>
<a href="#" data-type="text" data-pk="{{data.user.id}}" data-placement="right" data-placeholder="Required" data-title="Enter your firstname" class="firstname editable editable-click editable-empty">Empty</a>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-system">Action</button>
<button type="button" class="btn btn-system dark dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" >
<li ng-if="data.caisse_cotisation.nomcaisse !== 'Inscription'">
<a href="#" ng-click="Desinscription(data.id)"> <span class="fa fa-mail-forward pr5"></span> Desinscription </a>
</li>
<li class="animation-switcher">
<a href="#" data-effect="mfp-rotateUp" ng-click="Detail(data.id)"><span class="fa fa-info pr5"></span>Détail</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="panel footer" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>Pas d'enregistrement trouvé</h4>
</div>
</div>
</div>
</div>
<!-- Admin Form Popup -->
<div id="modal-panel" class="popup-basic admin-panel mfp-with-anim mfp-hide">
<div class="panel">
<div class="panel-heading">
<span class="panel-icon"><i class="fa fa-lightbulb-o"></i>
</span>
<span class="panel-title"> Détail inscription adhérent </span>
</div>
<div class="panel" id="p19">
<div class="panel-body pn">
<table class="table mbn tc-icon-1 tc-med-2 tc-bold-last">
<thead>
<tr class="hidden">
<th class="mw30">#</th>
<th>Nom adhérent</th>
<th>Prénom adhérent</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="fa fa-briefcase text-system"></span>
</td>
<td>Caisse</td>
<td>
<i class=" text-info pr10"></i>
{{adherent.caisse_cotisation.nomcaisse}}
</td>
</tr>
<tr>
<td>
<span class="fa fa-money text-system"></span>
</td>
<td>Montant cotisé</td>
<td>
<i class="fa fa-caret-up text-info pr10"></i>
{{adherent.montant_cotise}}
</td>
</tr>
<tr>
<td>
<span class="fa fa-check text-system"></span>
</td>
<td>Type payement</td>
<td>
<i class="fa fa-caret-up text-info pr10"></i>
{{adherent.typepayement}}
</td>
</tr>
<tr>
<td>
<span class="fa fa-power-off text-system"></span>
</td>
<td>Autre nom</td>
<td>
<i class="fa fa-ellipsis-horizontal text-info pr10"></i>
{{adherent.nom_secondaire}}
</td>
</tr>
<tr>
<td>
<span class="fa fa-minus-square-o text-system"></span>
</td>
<td>Description</td>
<td>
<i class=" text-info pr10"></i>
{{adherent.description}}
</td>
</tr>
<tr>
<td>
<span class="fa fa-toggle-right text-system"></span>
</td>
<td>Nom </td>
<td>
<i class=" text-info pr10"></i>
{{adherent.user.nom}}
</td>
</tr>
<tr>
<td>
<span class="fa fa-toggle-right text-system"></span>
</td>
<td>Prénom </td>
<td>
<i class="text-info pr10"></i>
{{adherent.user.prenom}}
</td>
</tr>
<tr>
<td>
<span class="fa fa-phone text-system"></span>
</td>
<td>Téléphone</td>
<td>
<i class=" text-info pr10"></i>
{{adherent.user.phone_number}}
</td>
</tr>
<tr>
<td>
<span class="fa fa-calendar text-system"></span>
</td>
<td>Date inscription</td>
<td>
<i class=" text-info pr10"></i>
{{adherent.user.created | date:'medium'}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<style>
/*demo styles*/
/*demo buttons*/
.contextual-demo a {
padding: 9px 4px;
width: 9.5%;
}
.contextual-demo a + a {
margin-left: 0.5%;
}
.contextual-demo-alt a {
padding: 9px 4px;
width: 15%;
}
.contextual-demo-alt a + a {
margin-left: 0.5%;
}
</style>
<?php echo $this->start('script'); ?>
<?php
echo $this->Html->script([
'../vendor/editors/ckeditor/ckeditor.js',
'../vendor/editors/summernote/summernote.js',
'../vendor/editors/markitup/jquery.markitup.js',
'../vendor/editors/markitup/sets/default/set.js',
'../vendor/editors/xeditable/js/bootstrap-editable.js',
'../vendor/editors/xeditable/inputs/address/address.js',
'../vendor/editors/xeditable/inputs/typeaheadjs/lib/typeahead.js',
'../vendor/editors/xeditable/inputs/typeaheadjs/typeaheadjs.js',
'../vendor/plugins/daterange/moment.min.js'
],['inline' =>false]);
?>
<?php echo $this->end(); ?>
<?php echo $this->start('scriptfooter'); ?>
<script type="text/javascript">
$(document).ready(function() {
"use strict";
// Init Theme Core
Core.init();
// Init Theme Core
Demo.init();
// Init X-editable Plugin
function XEdit() {
//enable / disable xedit
$('#enable').click(function() {
$(this).toggleClass('active');
$('#user .editable').editable('toggleDisabled');
});
// var CheminComplet = document.location.href;
//var link = CheminComplet.substring(0 ,CheminComplet.lastIndexOf( "view" ));
$('.firstname').editable({
//url:'link',
type: 'text',
pk: 0,
name: 'nomadherant',
title: 'Entrez un nom de l\'adhérent',
validate: function(value) {
if ($.trim(value) == '') return 'Le nom de l\'adhérent est obligatoire';
}
});
};
XEdit();
});
</script>
<?php echo $this->end(); ?>
mon code angular est ceci:
mainApp.controller('cotisationCtrl',function($scope,$rootScope,$http,$location){
console.log('Chargement des données...');
var path = $location.absUrl();
var $link = path.substring(0 ,path.lastIndexOf( "/" ))+ '/listeuser';
$scope.form = null;
$scope.listeCaisse = function(){
var idcaisse = $scope.form.choixcaisse;
if(idcaisse != 0)
{
$http.post($link,{'idcaisse':idcaisse}).success(function(data){
$scope.list = data;
$scope.filteredItems = $scope.list.length;
$scope.totalItems = $scope.list.length;
});
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
}
};
});Ce que je veux
je veux que lorsque l'on click sur ce xeditable, que l'input s'affiche
<a href="#" data-type="text" data-pk="{{data.user.id}}" data-placement="right" data-placeholder="Required" data-title="Enter your firstname" class="firstname editable editable-click editable-empty">Empty</a>Ce que j'obtiens
ma liste s'afiche bien mais impossible d'ouvrir le x-editable, par contre si je met le code
<a href="#" data-type="text" data-pk="{{data.user.id}}" data-placement="right" data-placeholder="Required" data-title="Enter your firstname" class="firstname editable editable-click editable-empty">Empty</a> après la fermeture de ma boucle angularjs, cela fonctionne correctement, j'ai comme l'impression que angularjs à tout controler
2 réponses
ce n'est pas recommandé d'utiliser jquery avec angular sachant que angular repose deja sur une version simplifié de jquery.
apres il sufit de chercher sur le net 2 secondes et tu trouvera plétore de directive angularjs liée à bootstrap et a tout ces composants.