Angularjs 表单输入未定义

为什么名称和密码未定义？ 我在他们身上使用了ng模型

 <form class="login" name="form">
            <div class="form-group" ng-class="{'has-error': isInvalidLogin}">
                <label for="name">Name: </label>
                <input type="text" ng-model="name" id="name" class="form-control" placeholder="Nitzan">
            </div>
            <div class="form-group" ng-class="{'has-error': isInvalidLogin}">
                <label for="password">Password: </label>
                <input type="password" ng-model="password" id="password" class="form-control" placeholder="1234">
                <p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
            </div>
            <button type="submit" class="btn btn-block btn-lg btn-success login-btn" ng-click="login()">Login</button>
        </form>

参见plunker：

---

您的问题是由于从当前作用域创建子作用域的

ng if

指令造成的。因此，$scope.name&$scope.password在

$scope.login

函数中未定义

我建议您为

user

创建一个对象，它最初是空的，比如

user={}

，或者您可以使用

nginit

在html上执行此操作，然后将其放在

mainController

中，这样它就可以由父级直接访问，而无需使用

$parent.

符号

并将

名称

和

密码

放在用户对象内

HTML

  <div ng-init="user={}">
    <div class="container login-div" ng-if="!currentUser">
      <form class="login" name="form" ng-submit="login()">
        <div class="form-group" ng-class="{'has-error': isInvalidLogin}">
          <label for="name">Name:</label>
          <input type="text" ng-model="user.name" id="name" class="form-control" placeholder="Nitzan">
        </div>
        <div class="form-group" ng-class="{'has-error': isInvalidLogin}">
          <label for="password">Password:</label>
          <input type="password" name="test" ng-model="user.password" id="password" class="form-control" placeholder="1234">
          <p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
        </div>
        <button type="submit" class="btn btn-block btn-lg btn-success login-btn">Login</button>
      </form>
    </div>
  </div>

在这里

更新

否则，您需要添加或更改ng模型以将此范围引用到父范围，如

HTML

  <div ng-init="user={}">
    <div class="container login-div" ng-if="!currentUser">
      <form class="login" name="form" ng-submit="login()">
        <div class="form-group" ng-class="{'has-error': isInvalidLogin}">
          <label for="name">Name:</label>
          <input type="text" ng-model="user.name" id="name" class="form-control" placeholder="Nitzan">
        </div>
        <div class="form-group" ng-class="{'has-error': isInvalidLogin}">
          <label for="password">Password:</label>
          <input type="password" name="test" ng-model="user.password" id="password" class="form-control" placeholder="1234">
          <p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
        </div>
        <button type="submit" class="btn btn-block btn-lg btn-success login-btn">Login</button>
      </form>
    </div>
  </div>

对于name

ng model=“$parent.name”

对于密码

ng model=“$parent.password”

代码

    $scope.login = function () {
        alert("Name "+ $scope.user.name +"& password is " +$scope.user.password)
        //usersService.get($scope.name, $scope.password).then(function success(result){
        //   $scope.currentUser = result;
        //}, function error() {
        //    $scope.isInvalidLogin = true;
        //});
    };

   $scope.login = function () {
        alert("Name "+ $scope.name +"& password is " +$scope.password)
        //usersService.get($scope.name, $scope.password).then(function success(result){
        //   $scope.currentUser = result;
        //}, function error() {
        //    $scope.isInvalidLogin = true;
        //});
    };

---

希望这能对你有所帮助。谢谢。

ng if创建子作用域，但名称和密码不在它的范围内（不是嵌套的），所以为什么它们在ng if子作用域中？@EmeraldBach yes ng if从当前作用域创建子作用域！但是如果-ngmodel不在ng中，则名称和密码不会嵌套在ng中-if@EmeraldBach你已经把问题讲完了吗。请务必查看此Plunkr中的html。表单标记位于

ng if=“！currentUser”

@EmeraldBach中。这不是一件好事。实际上，您添加了问题，我正在解释您添加的内容。。谢谢