How to use Bootstrap alerts using AngularJS

Question

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.

I search and get this custom directive . github.com/marcorinck/angular-growl . you can use this. — J_P
– J_P, Commented Oct 26, 2015 at 2:57
Sorry i haven't used that module . you can use bootstrap alert . well see my answer for sample example . — J_P
– J_P, Commented Oct 26, 2015 at 4:59

J_P · Accepted Answer · 2015-10-26 04:58:04Z

5

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.

answered Oct 26, 2015 at 4:58

J_P

6411 gold badge8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J_P Over a year ago

@Hema CDN wasn't working. Thanks for reminding. It is working now but it's kind of old style.

Mark Pieszak - Trilon.io · Accepted Answer · 2015-10-26 03:08:01Z

3

Use AngularUI (bootstrap directives for Angular)

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

answered Oct 26, 2015 at 3:08

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

1 Comment

gentle Over a year ago

Hi mcpDESIGNS, I know this. But how can I implement this to my angularJS part?

user2166669 · Accepted Answer · 2018-03-29 10:26:09Z

0

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>

answered Mar 29, 2018 at 10:26

user2166669

1

Comments

Sunny12 · Accepted Answer · 2019-07-10 05:56:11Z

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!!"

Collectives™ on Stack Overflow

How to use Bootstrap alerts using AngularJS

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related