控制器中未定义 ng-model [英] ng-model is undefined in controller

问题描述

我正在使用 ionic 并且我有以下观点:

<ion-content class="padding"><div class="row row-center"><div class="col"><div id="logo"></div><表格><div class="list"><label class="item item-input"><input type="text" placeholder="Membership No" ng-model="membershipNo"><label class="item item-input"><input type="password" placeholder="密码" ng-model="密码">

<button class="button button-block button-positive button-login" ng-click="login()">登录</表单>

</离子含量></ion-view>

还有我的控制器:

app.controller('loginController', ['$scope', '$localstorage',函数($scope，$localstorage){$scope.membershipNo;$scope.password;$scope.login = 函数 () {console.log("用户以会员号登录:" + $scope.membershipNo +"\n 和密码:" + $scope.password);}}]);

我不明白的是，当我单击按钮时，登录功能被正确调用.此外，如果我在控制器中将 $scope.membershipNo 设置为Banana Pancake"之类的内容，则视图实际上会更新.

然而，当登录功能实际运行时，却说membershipNo 和password 是未定义的.我对 Angular 和 Ionic 还很陌生，所以我知道这可能是一些 n00b 错误......

解决方案

我最近遇到了完全相同的问题，这可能是一个解决方案:https://stackoverflow.com/a/22768720/552936

修改后的报价:

<块引用>

如果你使用 ng-model，你必须在那里有一个点."
让你的模型指向一个 object.property 并且你一切顺利.

控制器

$scope.formData = {};$scope.login = 函数 () {console.log("用户以会员号登录:" + $scope.formData.membershipNo +"\n 和密码:" + $scope.formData.password);}

模板

<input type="password" placeholder="密码" ng-model="formData.password">

I'm using ionic and I have the following view:

<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>

And my controller:

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);
        }

    }
]);

What I don't understand, is that when I click the button, the login function is called correctly. Also, if in the controller I go and set $scope.membershipNo to something like "Banana Pancake", the view actually updates.

Yet when the login function actually runs, is says that membershipNo and password are undefined. I'm fairly new to Angular and Ionic so I know this is probably some n00b mistake...

解决方案

I had exact the same issue recently and that's probably a solution: https://stackoverflow.com/a/22768720/552936

Modified quote:

"If you use ng-model, you have to have a dot in there."
Make your model point to an object.property and you'll be good to go.

Controller

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

Template

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

这篇关于控制器中未定义 ng-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！