handling an array of alerts in angular

Question

Ok, so I'm trying to teach myself angular but I'm stuck on something I want to accomplish. Basically, it's a simple form built with UI Bootstrap. I want an info alert box to show up whenever the user gives focus to a textbox, textarea, radio button group, etc. And such alert box will have instructions about this particular field they are filling out. Whenever the user clicks off, the alert box should go away. So far, I have that functionality working with onFocus and onBlur. My problem is, I can't isolate the functionality to work for only the field the user is in. Not unless I create multiple controllers within my app and I find it hard to believe that would be the solution.

How can I declare several alert boxes in the array and call invoke them from their respective input field?

This is my app.j code

var nameApp = angular.module('nameApp', ['ngAnimate', 'ui.bootstrap', '$strap.directives']);

nameApp.controller('InstructionsCtrl', function ($scope, $sce, $timeout) {

    $scope.alerts = [];

    $scope.addAlert = function () {
        $scope.alerts.push({ type: 'info', msg: 'Please input your first name' });
    };

    $scope.closeAlert = function (index) {
        $scope.alerts.splice($scope.alerts.indexOf(this), 1);
    };

});

I am including a PLUNKER here

Thanks in advance

Tristan · Accepted Answer · 2015-11-07 22:16:27Z

1

I would recommend simplifying it to just the template since based on the described requirements you don't need to display multiple alerts in relation to each input.

In the below the alert has an ng-show and each input sets the value on focus and blur.

<div class="form-with-instructions" ng-controller="InstructionsCtrl" novalidate="novalidate">
    <div role="form">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="form-group">
                    <label>First Name </label>
                    <input type="text" value="" class="form-control" ng-focus="fnAlert = true" ng-blur="fnAlert = false"/>
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <div class="alert alert-warning alert-dismissible" role="alert" ng-show="fnAlert">
                <button type="button" class="close" ng-click="fnAlert = false"><span aria-hidden="true">&times;</span></button>
                Please input your first name
              </div>
            </div>
        </div> 
        <div class="row">   
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="form-group">
                    <label>Last Name </label>
                    <input type="text" value="" class="form-control" ng-focus="lnAlert = true" ng-blur="lnAlert = false"/>
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <div class="alert alert-warning alert-dismissible" role="alert" ng-show="lnAlert">
                <button type="button" class="close" ng-click="lnAlert = false"><span aria-hidden="true">&times;</span></button>
                Please input your first name
              </div>
            </div>
        </div>            
    </div>  
</div>

If you did want to use the alerts array method then you would need to define a different alert array for each input.

answered Nov 7, 2015 at 22:16

Tristan

3,3218 gold badges25 silver badges27 bronze badges

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

1 Comment

LOTUSMS Over a year ago

This is a really good answer. I'll mark it. However, in kinda disappointed that it wasn't more work in the app.js since after all, I'm trying to come up with practical exercises that I can learn with. But if it works, it works, right? Lol. Thanks a lot buddy. I would like to see other alternatives of anyone else cares to add an alerts array solution to this problem. I feel like learning how to use arrays will help me in other situations that may demand it

Collectives™ on Stack Overflow

handling an array of alerts in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related