我刚开始使用AngularJS,我想知道这种方法在我提交表单时将页面滚动到第一个输入错误。
以下是jQuery的方法:
$('html, body').animate({
scrollTop: $("--- #ID OF THE FIRST INPUT WITH ERROR ---").offset().top
}, 2000);
如何在Angular中执行此操作?
HTML
<form class="form" novalidate>
<input type="text" class="nom-du-projet" ng-model="fields.nom" required />
<p ng-show="fields.nom.$invalid && !fields.nom.$pristine">The name is required.</p>
<input type="text" ng-model="fields.cible" />
...
<button type="submit" ng-click="submit(fields)">Add</button>
</form>
JS
$scope.submit = function(fields){
console.log(fields);
$http
.post('/xxxx', fields)
.success(function(response) {
// success
})
.error(function(response) {
// scroll to field error
});
}
答案 0 :(得分:3)
您可以使用$anchorScroll
服务。
$location.hash("<errorFieldID>");
$anchorScroll();
或者您可以使用:
$window.scrollTo //you could even get bold and user window.scrollTo
有几个插件说他们可以做到这一点..但遗憾的是我没有审查过它们所以我不推荐任何插件。
答案 1 :(得分:0)
我为同一目的编写了一个angularJS指令,你可以使用它而无需编写任何额外的代码。如果指令需要任何改进或更正,请告诉我。
https://github.com/udayvarala/ng-scroll-to-error
谢谢,
答案 2 :(得分:0)
您可以尝试这样的事情:
//scroll to an anchor by ID
$scope.scrollToAnchor = function (anchor) {
if (anchor !== null) {
$location.hash(anchor);
$anchorScroll(anchor);
}
}
//use above function
$scope.scrollToAnchor($scope.myForm.$error.required[0].$name);
//or any ID
$scope.scrollToAnchor('ID');