我是角度js的新手,我正在尝试在登录页面添加一些动画。
我编写了一个控制器,可以在点击和模糊时更改输入字段的类别。
app.controller("con", function($scope,$rootScope,$http,$location){
$scope.OnClick = function(event){
$scope.username1 = "active";
$scope.password1 = "active";
};
$scope.OnBlurUserName = function(event){
if(this.username)
$scope.username1 = "active";
else{
$scope.username1 = "input";
}
};
$scope.OnBlurPassword = function(event){
if(this.password)
$scope.password1 = "active";
else{
$scope.password1 = "input";
}
};
});
<div class = "input" ng-class="username1" ng-controller="con">
<label class="label">Username</label>
<input class="field" name="username" type="text" ng-model="username"
ng-click="OnClick()" ng-blur="OnBlurUserName(username)" required>
<div class="input" ng-class="password1" ng-controller="con">
<label class="label">Password</label>
<input name="password" class="field" type="password" ng- model="password"
ng-click="OnClick()" ng-touched="OnClick()" ng-blur="OnBlurPassword(password)" required>
正在发生的事情是点击正在更改班级的用户名和密码。但是,如果我在用户名中输入内容并按下标签按钮并输入密码,则不会更改课程。
我如何检查用户是否已开始输入输入并应用我在点击时应用的相同课程?
提前致谢!
答案 0 :(得分:1)
您可以在输入中使用 ng-class 指令并根据您的需要进行调整:
ng-class="{'your-class': yourForm.yourInputsName.$dirty}"
这是一个很好的答案How can I add a class to an input if the input is changed with AngularJS?
此处还有一篇关于使用AngularJS https://scotch.io/tutorials/angularjs-form-validation
进行表单验证和操作的精彩文章答案 1 :(得分:0)
我通过添加ng-focus和ng-click来修复它。