bonjour, Je débute en angular, Je dois faire apparaître des champs dynamiquement sur un formulaire angular. comme le ng-model ne changeait pas dans mon ng-repeat, j'ai créé une fonction dans mon contrôleur. l'affichage est nickel mais le souci, une fois que je fais valider le formulaire, les données des champs ajoutés dynamiquement ne sont pas pris en compte dans informations envoyées par le formulaire. Help voilà mon code : app.js [code]var app = angular.module('sayaApp', ['ngRoute', 'ngTable']); //tableau pour l'injection des dépendances app.config(['$routeProvider', function($routeProvider) { //notation si on souhaite après faire une minification de code, souci de renomage des variables mis en paramètre $routeProvider .when('/', {templateUrl: 'html/home.html', controller: 'recettesCtrl'}) .when('/recette/:id', {templateUrl: 'html/recette.html', controller: 'recetteCtrl'}) //gestion du controlleur au niveau du routing au lieu de la vue : cf partials/recette.html .when('/ajout', {templateUrl: 'html/add.html', controller: 'addCtrl'}) .otherwise({redirectTo: '/'}); }]);[/code] add.html [code]<!-- formulaire d'ajout d'une recette-->

Ajouter une recette

<form name="recetteForm" novalidate ng-submit="addRecette(recetteForm)">

    <fieldset>
        <legend>Info User</legend>
        <div>
            <input type="text" class="form-control" placeholder="Nom" name="nom" ng-model="nom" required>
            <span ng-show="recetteForm.nom.$dirty">
                <span ng-show="recetteForm.nom.$error.required">Champ obligatoire</span>
            </span>
        </div>
        <div>
            <input type="text" class="form-control" placeholder="Prénom" name="prenom" ng-model="prenom">
        </div>
        <div>
            <input type="email" class="form-control" placeholder="Email" name="email" ng-model="email" required>
            <span ng-show="recetteForm.email.$dirty">
                <span ng-show="recetteForm.email.$error.email">L'email n'est pas correct</span>
                <span ng-show="recetteForm.email.$error.required">Champ obligatoire</span>
            </span>
        </div>
    </fieldset>

       <fieldset>
            <legend>Indrédients</legend>
            <div>
                <label>Nombre d'ingrédients</label>
                <input type="number" class="form-control" placeholder="Nombre d'ingredient" ng-model="nb_ingredients" ng-change="updateFormView(nb_ingredients)">
            </div>
            <div class="form-group col-lg-8 col-md-8 col-sm-8">
                <!--<input ng-repeat="(i, ingredient) in ingredients track by $index" class="ing form-control" placeholder='Ingrédient' name="ingredient" ng-model="ingredients*" required/>-->
                <div id="ingredients"></div>
            </div>
        </fieldset>
</form>

[/code] et enfin addCtrl.js [code]app.controller('addCtrl', function($scope, $rootScope, recetteFactory) { console.log($scope); //console.log($routeParams); $scope.updateFormView = function(nb) { var ingredients = new Array(nb); var input = new Array(nb); var temp = "ingredient"; var hiddenInput = ""; $("#ingredients").html(hiddenInput); angular.forEach(ingredients, function(valeur, cle) { for (var i = 0; i "; temp = "ingredient"; } }); angular.forEach(input, function(valeur, cle) { hiddenInput += valeur; }); $("#ingredients").html(hiddenInput); }; //$rootScope.loading = true; $scope.newRecette = {}; $scope.addRecette = function(newRecette) { console.log(newRecette); recetteFactory .add($scope.newRecette) .then( function() { alert("La recette a été ajoutée"); }, function() { alert("impossible d'ajouter dans la Base de données"); } ); $scope.newRecette = {}; }; });[/code] merci d'avance pour tout aide :)

1 réponse


Bonjour,
le problème c'est que tu ajoutes du contenu html contenant des directives angular à la main et c'est très mauvais..
Je ne suis pas sur que ton contenu soit parsé par angular une fois ajouté.
L'idée est de binder ta portion de vu sur un objet dans un scope angular et de manipuler l'objet , JAMAIS LE DOM.