滚动到第一个错误字段，并在所有其他字段中显示错误消息

时间：2018-04-02 13:44:07

标签： angularjs

以下是我的代码。 我想滚动到第一个错误字段，即使有很多错误字段，也会在调用保存函数时归档。但是必须在所有字段中显示错误消息。表中将有n行。

var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

    $scope.people = [];

   $scope.people = [
    {
    id: 1,
    name: "a",
      valid:true
    },
{
    id: 2,
    name: "b",
      valid:true},    {
    id: 3,
    name: "c",
      valid:true},
{
    id: 4,
    name: "d",
      valid:true},    {
    id: 5,
    name: "e",
      valid:true},
{
    id: 6,
    name: "f",
      valid:true},    {
    id: 7,
    name: "g",
      valid:true},
{
    id: 8,
    name: "h",
      valid:true},    {
    id: 9,
    name: "i",
      valid:true},
{
    id: 10,
    name: "j",
      valid:true},    {
    id: 11,
    name: "k",
      valid:true},
{
    id: 12,
    name: "l",
      valid:true},    {
    id: 13,
    name: "m",
      valid:true},
{
    id: 14,
    name: "n",
      valid:true},    {
    id: 15,
    name: "o",
      valid:true},
{
    id: 16,
    name: "p",
      valid:true},    {
    id: 17,
    name: "q",
      valid:true},
{
    id: 18,
    name: "r",
      valid:true},    {
    id: 19,
    name: "s",
      valid:true},
{
    id: 20,
    name: "t",
      valid:true},    {
    id: 21,
    name: "u",
      valid:true},
{
    id: 22,
    name: "v",
      valid:true},    {
    id: 23,
    name: "w",
      valid:true},
{
    id: 24,
    name: "x",
      valid:true},    {
    id: 25,
    name: "y",
      valid:true},
{
    id: 26,
    name: "z",
      valid:true}
];
      
}
table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<button ng-click="saveData()">Save</button>
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.name}}</td>
        <td><input ng-model="person.age">
        <p ng-hide="person.valid">
        <span>Please fill the field</span>
        </p></td>
    </tr>
</table>
</div>
</div>

这是为堆栈创建的示例示例，我将实现在我的实际代码中建议的方法。谢谢。

2 个答案:

答案 0 :(得分：0)

我希望这会有所帮助。

var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

    $scope.people = [];

   $scope.people = [
    {
    id: 1,
    name: "a",
      valid:true
    },
{
    id: 2,
    name: "b",
      valid:true},    {
    id: 3,
    name: "c",
      valid:true},
{
    id: 4,
    name: "d",
      valid:true},    {
    id: 5,
    name: "e",
      valid:true},
{
    id: 6,
    name: "f",
      valid:true},    {
    id: 7,
    name: "g",
      valid:true},
{
    id: 8,
    name: "h",
      valid:true},    {
    id: 9,
    name: "i",
      valid:true},
{
    id: 10,
    name: "j",
      valid:true},    {
    id: 11,
    name: "k",
      valid:true},
{
    id: 12,
    name: "l",
      valid:true},    {
    id: 13,
    name: "m",
      valid:true},
{
    id: 14,
    name: "n",
      valid:true},    {
    id: 15,
    name: "o",
      valid:true},
{
    id: 16,
    name: "p",
      valid:true},    {
    id: 17,
    name: "q",
      valid:true},
{
    id: 18,
    name: "r",
      valid:true},    {
    id: 19,
    name: "s",
      valid:true},
{
    id: 20,
    name: "t",
      valid:true},    {
    id: 21,
    name: "u",
      valid:true},
{
    id: 22,
    name: "v",
      valid:true},    {
    id: 23,
    name: "w",
      valid:true},
{
    id: 24,
    name: "x",
      valid:true},    {
    id: 25,
    name: "y",
      valid:true},
{
    id: 26,
    name: "z",
      valid:true}
];
$scope.saveData = function(){
var j=0;

for(var i=0;i<$scope.people.length;i++){
if($scope.people[i].age==undefined){
$scope.people[i].valid = false;
if(j==0){
console.log($scope.people[i].id);
    $('html, body').animate({scrollTop:$('#'+$scope.people[i].id).position().top}, 0);

j++;
}
}
}
}
      
}
table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<button ng-click="saveData()">Save</button>
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.name}}</td>
        <td><input id="{{person.id}}" ng-model="person.age">
        <p ng-hide="person.valid">
        <span class="error">Please fill the field</span>
        </p></td>
    </tr>
</table>
</div>
</div>

答案 1 :(得分：-1)

我有一个解决方案。谢谢。

var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

    $scope.people = [];

   $scope.people = [
    {
    id: 1,
    name: "a",
      valid:true
    },
{
    id: 2,
    name: "b",
      valid:true},    {
    id: 3,
    name: "c",
      valid:true},
{
    id: 4,
    name: "d",
      valid:true},    {
    id: 5,
    name: "e",
      valid:true},
{
    id: 6,
    name: "f",
      valid:true},    {
    id: 7,
    name: "g",
      valid:true},
{
    id: 8,
    name: "h",
      valid:true},    {
    id: 9,
    name: "i",
      valid:true},
{
    id: 10,
    name: "j",
      valid:true},    {
    id: 11,
    name: "k",
      valid:true},
{
    id: 12,
    name: "l",
      valid:true},    {
    id: 13,
    name: "m",
      valid:true},
{
    id: 14,
    name: "n",
      valid:true},    {
    id: 15,
    name: "o",
      valid:true},
{
    id: 16,
    name: "p",
      valid:true},    {
    id: 17,
    name: "q",
      valid:true},
{
    id: 18,
    name: "r",
      valid:true},    {
    id: 19,
    name: "s",
      valid:true},
{
    id: 20,
    name: "t",
      valid:true},    {
    id: 21,
    name: "u",
      valid:true},
{
    id: 22,
    name: "v",
      valid:true},    {
    id: 23,
    name: "w",
      valid:true},
{
    id: 24,
    name: "x",
      valid:true},    {
    id: 25,
    name: "y",
      valid:true},
{
    id: 26,
    name: "z",
      valid:true}
];
$scope.saveData = function(){
var j=0;

for(var i=0;i<$scope.people.length;i++){
if($scope.people[i].age==undefined){
$scope.people[i].valid = false;
if(j==0){
console.log($scope.people[i].id);
    $('html, body').animate({scrollTop:$('#'+$scope.people[i].id).position().top-25}, 0);

j++;
}
}
}
}
      
}
table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}
.error{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<button ng-click="saveData()">Save</button>
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.name}}</td>
        <td><input id="{{person.id}}" ng-model="person.age">
        <p ng-hide="person.valid">
        <span class="error">Please fill the field</span>
        </p></td>
    </tr>
</table>
</div>
</div>

相关问题
最新问题