Bonjour,
Voila je rencontre un petit problème avec mon code.
J'ai créé un petit projet simple pour me commencer à coder en Angular JS.
On a des combinaisons à 4 chiffres et j'ai donc un tableau où j'affiche des données .
J'ai aussi un petit formulaire avec 4 boutons radios et ce que je veux faire, c'est que, quand je choisis un bouton radio , mon tableau se mette à jour.
Voici le code :
Mon controller :
angular.module('crudApp').controller('CombinaisonController',
['$scope', 'CombinaisonService', function ($scope, CombinaisonService) {
$scope.combinaisons = [];
$scope.inputChoixLiane = "";
$scope.choisirLiane = function () {
fetchCombinaisonsByChoixLiane($scope.inputChoixLiane);
};
fetchAllCombinaisons();
function fetchAllCombinaisons() {
CombinaisonService.chargerToutesLesCombinaisons().then(
function (d) {
$scope.combinaisons = d;
console.log($scope.combinaisons);
},
function (errResponse) {
console.error('Error while fetching Users');
}
)
}
function fetchCombinaisonsByChoixLiane(id) {
CombinaisonService.chargerCombinaisonsParChoixLiane(id).then(
function (d) {
$scope.combinaisons = d;
console.log($scope.combinaisons);
},
function (errResponse) {
console.error('Error while fetching Users');
}
)
}
}]);
Mon html pour le formulaire :
<div class="card">
<!-- Default panel contents -->
<div class="card-body">
<h5 class="card-title">{{titre}}</h5>
<form style="margin:20px 20px 20px 20px" id="combinaisonForm">
<div class="form-group">
<h6>Choix</h6>
<div class="form-check form-check-inline">
<input ng-model="inputChoixLiane" ng-change="choisirLiane()" class="form-check-input" type="radio" name="choixLiane" id="choixLianeUn" value="1">
<label class="form-check-label" for="choixLianeUn">1</label>
</div>
<div class="form-check form-check-inline">
<input ng-model="inputChoixLiane" ng-change="choisirLiane()" class="form-check-input" type="radio" name="choixLiane" id="choixLianeDeux" value="2">
<label class="form-check-label" for="choixLianeDeux">2</label>
</div>
<div class="form-check form-check-inline">
<input ng-model="inputChoixLiane" ng-change="choisirLiane()" class="form-check-input" type="radio" name="choixLiane" id="choixLianeTrois" value="3">
<label class="form-check-label" for="choixLianeTrois">3</label>
</div>
<div class="form-check form-check-inline">
<input ng-model="inputChoixLiane" ng-change="choisirLiane()" class="form-check-input" type="radio" name="choixLiane" id="choixLianeQuatre" value="4">
<label class="form-check-label" for="choixLianeQuatre">4</label>
</div>
</div>
</form>
<span>{{choixLiane}}</span>
</div>
</div>
Mon html pour afficher la liste :
<div class="card">
<div class="card-body">
<h5 class="card-title">Liste des combinaisons</h5>
<table class="table table-hover table-sm table-striped table-dark">
<thead>
<tr>
<th>Lianes</th>
<th>Crocodiles</th>
<th>Ponts</th>
<th>Escaliers</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in combinaisons">
<td>{{u.choixLiane}}</td>
<td>{{u.choixCroco}}</td>
<td>{{u.choixPont}}</td>
<td>{{u.choixEscalier}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Les "console.log($scope.combinaisons);" me permettent juste de voir si je récupère bien la bonne liste de combinaisons et c'est bien el cas.
Je mets donc ces combinaisons dans mon scope mais mon tableau ne se met pas à jour.
Comment puis-je régler le problème ?
D'avance, merci :)
oici quelques points de rappel :
$scope constitue le contexte de travail
<a href="https://www.oovoo.onl/adam4adam/">Adam4adam</a> <a href=" https://thegadgetwire.com/tutuapp/">TutuApp</a> <a href=" https://thegadgetwire.com/appvalley/">AppValley<a>
$scope constitue une dépendance que nous utilisons dans nos contrôleurs afin de rendre effectif le data-binding
Chaque directive peut soit créer son propre contexte, soit hériter du contexte du parent. Dans le cas de l'héritage, il convient de comprendre le concept d'héritage en JavaScript et plus généralement le concept de "chaine de prototypes".