ng-model在控制器中未定义

时间:2015-08-13 12:44:06

标签: angularjs ionic-framework ionic

我使用离子,我有以下观点:

QWidget* testWidget = new QWidget;
QVBoxLayout* layout = new QVBoxLayout;
QStringList strings;
strings << "asdfasd" << "asdffdfd" << "asdvvsdf" << "asdfccasdf";
Q_FOREACH(QString string, strings){
    TagButton* btn = new TagButton();
    btn->setText(string);
    layout->addWidget(btn);
}
testWidget->setLayout(layout);

QScrollArea* scrollArea = new QScrollArea;
scrollArea->setWidget(testWidget);

scrollArea->show();

我的控制员:

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

我不明白的是,当我点击按钮时,会正确调用登录功能。另外,如果在控制器中我将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); } } ]); 设置为&#34; Banana Pancake&#34;,视图实际上会更新。

然而,当登录功能实际运行时,会说memberNo和密码未定义。我对Angular和Ionic很新,所以我知道这可能是一些n00b错误...

5 个答案:

答案 0 :(得分:41)

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

修改后的引语:

  

“如果你使用ng-model,你必须在那里有一个点。”
让你的模型指向一个object.property你会很好去。

     

<强>控制器

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

<强>模板

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

答案 1 :(得分:3)

请检查此代码这对我有用:   

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

在您的控制器中:

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

}]);

答案 2 :(得分:2)

您需要在控制器中定义 $ scope 变量:

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

所以你的控制器看起来像:

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

}]);

答案 3 :(得分:1)

Hey Jean,Have a look of it your code is working here

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

    }]);

答案 4 :(得分:0)

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