无法读取 angularjs 中未定义的属性“用户名”答案

【问题标题】：Cannot read property 'username' of undefined in angularjs无法读取 angularjs 中未定义的属性“用户名”
【发布时间】：2017-03-09 23:15:53
【问题描述】：

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

TypeError: 无法读取未定义的属性“用户名”

有人帮帮我吗？

表格：

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

    }]);

【问题讨论】：

this.inputData = {};首先初始化 inputData。
定义前$scope.postForm = function() {...}
你能修改你的代码吗？

标签： javascript angularjs ionic-framework

【解决方案1】：

在你的控制器里做

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

并将
this.inputData.username替换为self.inputData.username
this.inputData.password替换为self.inputData.password

【讨论】：

【解决方案2】：

我尝试了一个示例。看看这个

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

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

【讨论】：

【解决方案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';
        })
    }

}]);

【讨论】：