Question

我正在使用AngularJS编写一个包含注册和登录选项的登录页面。有三个输入字段：username，password和name。我想点击注册按钮时出现name字段，当我点击登录按钮时消失。因此，我想在点击时将输入字段的类更改为“隐藏”，让css处理该作业。我怎么能用AngularJS做到这一点？有没有更好的方法来隐藏name输入字段？

HTML：

<h2>Welcome to Mail Service</h2>

<form action="/action_page.php">
  <div class="imgcontainer">
    <img src="images/img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label><b>Username</b></label><br>
    <input type="text" placeholder="Enter Username" name="uname" required ng-model="user.username"><br>
    <label><b>Password</b></label><br>
    <input type="password" placeholder="Enter Password" name="psw" required ng-model="user.password"><br>

    <!-- NAME INPUT FIELD -->
    <div class="textField-hidden">
        <label><b>Name</b></label><br>
        <input type="text" placeholder="Enter Name" ng-model="user.name">
    </div><br>

    <button type="submit" ng-click="login()">Login</button><br>
    <button type="submit" ng-click="register()">Register</button>
  </div>

</form>

AngularJS控制器：

app.controller('LoginCtrl', ['$scope', '$resource', '$location',  
    function($scope, $resource, $location)
    {
        $scope.login = function()
        {
            var loginRequest = $resource('/api/login');

            loginRequest.save($scope.user, function(response)
            {
            });
        };

        $scope.register = function()
        {
            var registerRequest = $resource('/api/register');

            loginRequest.save($scope.user, function(response)
            {
            });
        };
    }]);

Answer 1

您可以将变量用于输入字段类型并隐藏它

<强> HTML ：

<input type="{{type}}" placeholder="Enter Name" ng-model="user.name">

<强> JS ：

app.controller('LoginCtrl', ['$scope', '$resource', '$location',  
    function($scope, $resource, $location)
    {
        $scope.login = function()
        {
            $scope.type="hidden";
            var loginRequest = $resource('/api/login');

            loginRequest.save($scope.user, function(response)
            {
            });
        };

        $scope.register = function()
        {
           $scope.type="text";
            var registerRequest = $resource('/api/register');

            loginRequest.save($scope.user, function(response)
            {
            });
        };
    }]);

另一种方法是使用ng-if变量上定义的ng-hide/ng-show或$scope，并根据您的需要触发此变量的布尔值。

Answer 2

您需要使用ng-hide或ng-show指令（基于您的上下文），并为其提供适当的条件值，如下所示：

$scope.showName = false;

$scope.login = function() {
  // Your code
  $scope.showName = false;
}

$scope.register = function() {
  // Your code
  $scope.showName = false;
}

相应地更改HTML：

<input ng-show="showName" type="{{type}}" placeholder="Enter Name" ng-model="user.name">

这样，仅当ng-show的表达式求值为true时，才会显示输入框。或者，ng-if可以与ng-show类似使用，但它有效a bit different。

Answer 3

当您单击“注册”时，只需将变量填充为true，并在单击“登录”时将该变量设置为false。

<h2>Welcome to Mail Service</h2>

<form action="/action_page.php">
<div class="imgcontainer">
<img src="images/img_avatar2.png" alt="Avatar" class="avatar">
</div>

<div class="container">
<label><b>Username</b></label><br>
<input type="text" placeholder="Enter Username" name="uname" required ng-model="user.username"><br>
<label><b>Password</b></label><br>
<input type="password" placeholder="Enter Password" name="psw" required ng-model="user.password"><br>

<!-- NAME INPUT FIELD -->
<div class="textField-hidden" ng-show="register">
    <label><b>Name</b></label><br>
    <input type="text" placeholder="Enter Name" ng-model="user.name">
</div><br>

<button type="submit" ng-click="login()">Login</button><br>
<button type="submit" ng-click="register()">Register</button>

现在，当您单击注册

时，将$ scope.register填充为true

 app.controller('LoginCtrl', ['$scope', '$resource', '$location',  
function($scope, $resource, $location)
{
   $scope.register=false; 
   $scope.login = function()
    {
        var loginRequest = $resource('/api/login');
        $scope.register=false;
        loginRequest.save($scope.user, function(response)
        {
        });
    };

    $scope.register = function()
    {
        var registerRequest = $resource('/api/register');
            $scope.register=true;

        loginRequest.save($scope.user, function(response)
        {
        });
    };
}]);

AngularJS隐藏输入字段

HTML：

AngularJS控制器：

3 个答案: