2015-09-26 2 views
0

У меня есть службы и контроллеры, написанные в AngularJS, в которых я отправляю запрос на заявку в приложение Node.js и используя статус отправки и код для отправки сообщения об ошибке, например Username already exists или Wrong email and password, но я не получаю. Как показать эти ошибки в frontend HTML. Например, после того, как подача нажата, вероятно. Как бы вы это сделали?Как показывать сообщения об ошибках в AngularJS?

$http.post('/register', registerUser).then(function(response){ 
       console.log(response.data); 
} 

Как показать ответ .data в HTML. Я читал о $ error в угловой, но я не думаю, что это сработает в моем случае, поскольку моя - это обычная ошибка.

Благодаря

ответ

10

Ваш HTML должен быть что-то вроде:

<div ng-if="errorMessage">{{ errorMessage }}</div> 

Затем вы можете изменить $scope.errorMessage для его отображения:

$http.post('/register', registerUser).then(function(response){ 
    switch(response.data) { 
     case 'loginExists': 
      $scope.errorMessage = 'Username already exists'; 
      break; 
     case 'loginError': 
      $scope.errorMessage = 'Wrong email and password'; 
      break; 
     default: 
      $scope.errorMessage = false; 
    } 
} 
+0

кажется логически правильным. Позвольте мне попробовать. Я вернусь к вам. –

4

Вы можете использовать предупреждение Bootstrap:

<div ng-show="hasError"> 
<alert ng-repeat="error in errors track by $index" type="danger" close="closeAlert($index)">{{error}}</alert> 
</div> 

в контроллере:

$scope.errors = []; 
$scope.hasError = false; 
$scope.closeAlert = function (index) { 
    $scope.errors.splice(index, 1); 
} 

$http.post('/register', registerUser).then(function(response){ 
switch(response.data) { 
    case 'error1': 
     $scope.hasError = true; 
     $scope.errors.push('error1'); 
     break; 
    case 'error2': 
     $scope.hasError = true; 
     $scope.errors.push('error2'); 
     break; 
    default: 
     $scope.hasError = true; 
     $scope.errors.push("I don't know whats going on"); 
    } 
} 
}; 

Вы можете использовать его везде.

Смежные вопросы