表单输入未定义

Question

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

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

在控制器中：

 $scope.login = function () {
        usersService.get($scope.name, $scope.password).then(function success(result){
           $scope.currentUser = result;
        }, function error() {
            $scope.isInvalidLogin = true;
        });
    };

看到那个笨蛋： http://plnkr.co/edit/QD3vtil3w9pd4d1TGl9v?p=preview

Answer 1

您的问题是因为 ng-if 指令从当前作用域创建子作用域。因此 $scope.name & $scope.password 在 $scope.login 函数中未定义。

我建议你为 user 创建一个对象，它最初像 user={} 一样是空白的，或者你可以在 html 上使用 ng-init 创建一个对象，然后将它在 mainController 内部，这样它就可以由父级直接访问，而无需使用 $parent. 符号。

并将 name 和 password 放在用户对象中。

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>

代码

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

Working Plunkr 这里

更新

否则您需要添加更改您的 ng-model 以将此范围引用到父范围，例如

HTML

姓名ng-model="$parent.name"

求密码ng-model="$parent.password"

代码

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

Plunkr Here

希望对您有所帮助。谢谢。

表单输入未定义

Form input is undefined

forms

model

view

angularjs