Question

我想用angularjs和ionic登录。但是当我运行这个程序时，这个程序是错误的。错误是：

TypeError：无法读取属性＆＃39;用户名＆＃39;未定义的

有谁帮助过我？

表格：

 <body ng-app="apps" ng-controller="PostController as postCtrl">
   <ion-view view-title="Please Sign in">
  <ion-content class="padding">
    <div class="list">
      <label class="item item-input">
        <input type="text" placeholder="Name" ng-model="postCtrl.inputData.username">
      </label>
      <label class="item item-input">
        <input type="password" placeholder="Password" ng-model="postCtrl.inputData.password">
      </label>
    </div>
    <div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
    <button class="button button-full button-balanced" ng-click="postForm()">Sign In</button>
  </ion-content>
</ion-view>
<script src="controller.js"></script>
  </body>

控制器：

angular.module('apps', ['ionic'])
    .controller('PostController', ['$scope', '$http', function($scope, $http) {

        $scope.postForm = function() {

            var encodedString = 'username=' +
                encodeURIComponent(this.inputData.username) +
                '&password=' +
                encodeURIComponent(this.inputData.password);

            $http({
                method: 'POST',
                url: 'check-login.php',
                data: encodedString,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            })
            .success(function(data, status, headers, config) {
                console.log(data);
                if ( data.trim() === 'correct') {
                    window.location.href = 'home.html';
                } else {
                    $scope.errorMsg = "Login not correct";
                }
            })
            .error(function(data, status, headers, config) {
                $scope.errorMsg = 'Unable to submit form';
            })
        }

    }]);

Answer 1

在你的控制器中

var self = this;
self.inputData = {};

并替换
this.inputData.username self.inputData.username的{{1}} this.inputData.password与self.inputData.password

。{

Answer 2

我试过一个样本。看看这个

 $scope.inputData = {
    username: null,
  password: null
 }

http://jsfiddle.net/JKBbV/1179/

Answer 3

你可以采用角度方式，如下所示..这应该是使用ng-model的正确目的..

表格：

<body ng-app="apps" ng-controller="PostController as postCtrl">
<ion-view view-title="Please Sign in">
<ion-content class="padding">
<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="Name" ng-model="username">
  </label>
  <label class="item item-input">
    <input type="password" placeholder="Password" ng-model="password">
  </label>
</div>
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<button class="button button-full button-balanced" ng-click="postForm()">Sign In</button>
 </ion-content>
</ion-view>
<script src="controller.js"></script>
</body>

控制器：

angular.module('apps', ['ionic'])
.controller('PostController', ['$scope', '$http', function($scope, $http) {
$scope.username="";$scope.password:"";
    $scope.postForm = function() {

        var encodedString = 'username=' +
            encodeURIComponent($scope.username) +
            '&password=' +
            encodeURIComponent($scope.username);

        $http({
            method: 'POST',
            url: 'check-login.php',
            data: encodedString,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
        .success(function(data, status, headers, config) {
            console.log(data);
            if ( data.trim() === 'correct') {
                window.location.href = 'home.html';
            } else {
                $scope.errorMsg = "Login not correct";
            }
        })
        .error(function(data, status, headers, config) {
            $scope.errorMsg = 'Unable to submit form';
        })
    }

}]);

无法读取属性＆＃39;用户名＆＃39;在angularjs中未定义的

3 个答案: