2 votes

Problème de portée indéfinie dans un formulaire JS d'Angujar

J'ai des difficultés à lier les données du formulaire (qui sont complètes) à mon contrôleur. Voici mon code :

<form name="form_foto" novalidate>
        <div class="form-group">
            <label>URL de la foto: </label>
            <!--
            <input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg">
            -->
            <input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg" data-ng-model="mifoto.foto" name="foto">
        </div>
        <div class="form-group">
            <label>Lugar: </label>
            <input type="text" required class="form-control" placeholder="Lugar de ejemplo" data-ng-model="mifoto.lugar" name="lugar">
        </div>
        <div class="form-group">
            <label>Año: </label>        
            <input type="text" required class="form-control" placeholder="2016" data-ng-model="mifoto.anio" name="anio">
        </div>
        <!--
        <button class="btn btn-default">Guardar Foto</button>
        -->
        <button class="btn btn-default" data-ng-disabled="datosNoValidos()" data-ng-click="guardarFoto()">Guardar Foto</button>
    </form>

guardarFoto Code de fonction :

$scope.guardarFoto = function(){        

        alert($scope.mifoto);   //comes out undefined   

        $scope.misFotos.push($scope.mifoto);
        delete $scope.mifoto;     

    }

Toute aide sera grandement appréciée. Merci !

2voto

MeTe-30 Points 531

Il suffit d'initialiser $scope.mifoto = {} .
Regardez cet exemple en direct :

angular.module('app', [])
  .controller('ctrl', ['$scope',
    function($scope) {
      $scope.misFotos = [];
      $scope.mifoto = {};

      $scope.guardarFoto = function() {

        alert($scope.mifoto); //comes out undefined   

        $scope.misFotos.push($scope.mifoto);
        delete $scope.mifoto;

      }
    }
  ])

<!DOCTYPE html>
<html ng-app="app">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-controller="ctrl">
  <form name="form_foto" novalidate>
    <div class="form-group">
      <label>URL de la foto:</label>
      <!--
            <input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg">
            -->
      <input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg" data-ng-model="mifoto.foto" name="foto">
    </div>
    <div class="form-group">
      <label>Lugar:</label>
      <input type="text" required class="form-control" placeholder="Lugar de ejemplo" data-ng-model="mifoto.lugar" name="lugar">
    </div>
    <div class="form-group">
      <label>Año:</label>
      <input type="text" required class="form-control" placeholder="2016" data-ng-model="mifoto.anio" name="anio">
    </div>
    <!--
        <button class="btn btn-default">Guardar Foto</button>
        -->
    <button class="btn btn-default" data-ng-disabled="datosNoValidos()" data-ng-click="guardarFoto()">Guardar Foto</button>
  </form>
</body>

</html>

0voto

Wcan Points 562

Initialiser mifoto en dehors de votre fonction.

$scope.mifoto = {};

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X