CODEWITHSUNDEEP
javascriptjqueryangularjsdjangotwitter-bootstrap
gentle
gentle

Reputation: 151

How to use Bootstrap alerts using AngularJS

Hi My project works on Djnago and AngularJS. I want include bootstrap alerts once the user submit. If it is successful show alert-success etc. How can I do this? The following is my angularJS code:

$scope.submit =function(){
    data = {};
    angular.extend(data, $scope.final_data);
    angular.extend(data, { xxx: $scope.final_data.xxx });
    $http.post('{% url 'submission' %}', data).success(
        function(data){
            $scope.get_info();
            alert('DONE!')
        }).error(function(){
            alert('not submitted');
    })
};

Both the alert is working, I want to replace that with bootstrap alerts. How can I do that? Thanks in advance.

Upvotes: 5

Views: 13963

Answers (4)

Sunny12
Sunny12

Reputation: 383

Here is the workaround I have used

view file: 

<div class="alert alert-{{ResponseModel.ResponseType}}" alert-dismissible ng-show="ResponseModel.ResponseAlert">
<a href="#" class="close" ng-click="ResponseModel.ResponseAlert = false" aria-label="close">&times;</a>
<strong> {{ResponseModel.ResponseMessage}} </strong>
</div>

This helps to close the alert message box when required and also appear again when displaying the alert message. Here ResponseModel.ResponseType will be the type of alert that could info, danger, success, etc., ResponseModel.ResponseAlert will be used to show hide the alert message and ResponseModel.ResponseMessage will contains the message you want to display. You can call the alert message whenever required like described below:

Controller File:

$scope.ResponseModel = {};
$scope.ResponseModel.ResponseAlert = true;
$scope.ResponseModel.ResponseType = "danger";
$scope.ResponseModel.ResponseMessage = "Message to be displayed!!"

Upvotes: 0

user2166669
user2166669

Reputation: 1

Please look into this package and add your opinions https://www.npmjs.com/package/lg-custom-alert

<button lg-alert="[scope-function]" lg-size="[size of the modal]" lg-type="[type]" lg-message="[message need to be displayed in the alert">
    Alert 
</button>

Upvotes: 0

J_P
J_P

Reputation: 641

Well, you can show/hide alert using ng-show/ng-hide according to error status . I have created a sample plunker. 

<alert ng-show='alertType' type="{{alertType}}" close='removeAlert()'>{{alertType}} Alert</alert>
  <select ng-model="alertType">
    <option>danger</option>
    <option>success</option>
    <option>warning</option>
  </select>

This may help you.

Upvotes: 5

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66971

Use AngularUI (bootstrap directives for Angular)

https://angular-ui.github.io/bootstrap/#/alert

Upvotes: 3

Related Questions