我正在使用AngularJS编写一个包含注册和登录选项的登录页面。有三个输入字段:username
,password
和name
。我想点击注册按钮时出现name
字段,当我点击登录按钮时消失。因此,我想在点击时将输入字段的类更改为“隐藏”,让css处理该作业。我怎么能用AngularJS做到这一点?有没有更好的方法来隐藏name
输入字段?
<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>
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)
{
});
};
}]);
答案 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-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。
答案 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)
{
});
};
}]);