web-dev-qa-db-fra.com

ng-model n'est pas défini dans le contrôleur

J'utilise ionic et j'ai la vue suivante:

<ion-view hide-nav-bar="true" ng-controller="loginController" class="login-view">
  <ion-content class="padding">

    <div class="row row-center">
      <div class="col">

        <div id="logo"></div>

        <form>
          <div class="list">
            <label class="item item-input">
              <input type="text" placeholder="Membership No" ng-model="membershipNo">
            </label>
            <label class="item item-input">
              <input type="password" placeholder="Password" ng-model="password">
            </label>
          </div>

          <button class="button button-block button-positive button-login" ng-click="login()">
            Login
          </button>
        </form>

      </div>
    </div>

  </ion-content>
</ion-view>

Et mon contrôleur:

app.controller('loginController', ['$scope', '$localstorage',
    function($scope, $localstorage) {

        $scope.membershipNo;
        $scope.password;

        $scope.login = function () {
            console.log("User logged in with membership no: " + $scope.membershipNo +
    "\n and password: " + $scope.password);
        }

    }
]);

Ce que je ne comprends pas, c’est que lorsque je clique sur le bouton, la fonction de connexion s’appelle correctement. De plus, si dans le contrôleur je mets $scope.membershipNo à quelque chose comme "Banana Pancake", la vue est mise à jour.

Pourtant, lorsque la fonction de connexion est exécutée, il est indiqué que membershipNo et mot de passe ne sont pas définis. Angular et Ionic sont relativement nouveaux, alors je sais que c’est probablement une erreur de n00b ...

angularjsionic-frameworkionic
14
Tiwaz89

J'ai eu exactement le même problème récemment et c'est probablement une solution: https://stackoverflow.com/a/22768720/552936

Devis modifié:

"Si vous utilisez ng-model, vous devez y insérer un point." 
Faites que votre modèle pointe vers un object.property et vous serez prêt à partir.

Manette

$scope.formData = {};
$scope.login = function () {
  console.log("User logged in with membership no: " + $scope.formData.membershipNo +
  "\n and password: " + $scope.formData.password);
 }

Modèle

<input type="text" placeholder="Membership No" ng-model="formData.membershipNo">
<input type="password" placeholder="Password" ng-model="formData.password">
41
mbajur

S'il vous plaît vérifier ce code Cela a fonctionné pour moi: 

<div class="row row-center">
  <div class="col">

    <div id="logo"></div>

    <form>
      <div class="list">
        <label class="item item-input">
          <input type="text" placeholder="Membership No" ng-model="data.membershipNo">
        </label>
        <label class="item item-input">
          <input type="password" placeholder="Password" ng-model="data.password">
        </label>
      </div>

      <button class="button button-block button-positive button-login" ng-click="login()">
        Login
      </button>
    </form>

  </div>
</div>

et dans votre contrôleur:

app.controller('loginController', ['$scope',
  function($scope) {
    $scope.data={};
  $scope.login = function () {
    console.log("User logged in with membership no: " + $scope.data.membershipNo +
    "\n and password: " + $scope.data.password);
  }

}]);
3
Anil kumar

Vous devez définir votre $ scope variables comme ceci dans votre contrôleur:

$scope.membershipNo = '';
$scope.password = '';

Donc, votre contrôleur ressemblerait à ceci:

app.controller('loginController', ['$scope', '$localstorage',
  function($scope, $localstorage) {

  $scope.membershipNo = '';
  $scope.password = '';
  $scope.login = function () {
    console.log("User logged in with membership no: " + $scope.membershipNo +
    "\n and password: " + $scope.password);
  }

}]);
2
mhx

Hey Jean, regarde ça ton code fonctionne ici

       <ion-view ng-app="app" hide-nav-bar="true" ng-controller="loginController" class="login-view">
      <ion-content class="padding">

        <div class="row row-center">
          <div class="col">

            <div id="logo"></div>

            <form>
              <div class="list">
                <label class="item item-input">
                  <input type="text" placeholder="Membership No" ng-model="membershipNo">
                </label>
                <label class="item item-input">
                  <input type="password" placeholder="Password" ng-model="password">
                </label>
              </div>

              <button class="button button-block button-positive button-login" ng-click="login()">
                Login
              </button>
            </form>

          </div>
        </div>

      </ion-content>
    </ion-view> 


var app= angular.module("app",[]);
    app.controller('loginController', ['$scope', 
      function($scope, $localstorage) {

      $scope.membershipNo;
      $scope.password;
      $scope.login = function () {
        alert("User logged in with membership no: " + ($scope.membershipNo || '') +
        "\n and password: " + ($scope.password || ''));
      }

    }]);
1
Akshay Dhankhar
$scope.user = {};
$scope.submitForm = function (isValid) {
   if (($scope.user.name || '').length > 0){ //Code }
}
0
Hakan