javascript - Display an alert after submitting a form using angularjs -
i'm using angularjs login form, , i'm making api call server username/password , display alert.
login.jade
// form input(type="submit",ng-click="submit()") div.alert(ng-show="showalert",class="{{alert}}",ng-animate="{show: 'alert-show', hide: 'alert-hide'}") button(ng-click="showalert = !showalert") fadein
controller.js
$scope.submit = function () { if ($scope.username != undefined && $scope.password != undefined) { $http({ method: 'post', data: { username: $scope.username, password: $scope.password }, url: 'api/login' }). success(function (data, status, headers, config) { if (data.auth) { $scope.alert = data.alert; } else { $scope.alert = data.alert; } }). error(function (data, status, headers, config) { // else }); $scope.showalert = true; } }
data.alert
class of alert (alert-success
, alert-warning
), instantly shows alert, without fading. if remove $scope.alert = data.alert
, works fine. thinking having 2/3 div.alert
, , having different scopes ($scope.alert1
, $scope.alert2
) i'm sure there better way.
moreover, on initial load, div.alert
displayed faded. set alert on display: none
when loading, looking 'cleaner' way.
english not native language, might have made mistakes, apologies. thanks.
$scope.showalert = true
outside of success
, error
callbacks. you're setting showalert
true
set call $http
.
remember $http
service returns promise , callbacks (success
, error
in case) not invoked immediately. they'll invoked once server responds. try setting $scope.showalert = true
inside success function , see if more expecting.
Comments
Post a Comment