AngularJS隐藏输入字段

时间:2017-07-05 10:29:50

标签: html css angularjs

我正在使用AngularJS编写一个包含注册和登录选项的登录页面。有三个输入字段:usernamepasswordname。我想点击注册按钮时出现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)
            {
            });
        };
    }]);

3 个答案:

答案 0 :(得分: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,并根据您的需要触发此变量的布尔值。

答案 1 :(得分:1)

您需要使用ng-hideng-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

答案 2 :(得分:1)

当您单击“注册”时,只需将变量填充为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)
        {
        });
    };
}]);