Create popup with alert in AngularJS and JavaScript

Question

I am working on a project and want to have an alert box pop up when the user clicks on the input section. However, I am having issues. Any suggestions?

My html/AngularJS code:

<li ng-click="showCustomerList()" class="clickable">
    <label>Customer Info</label>
    <input readonly = "readonly" ng-class = "{editing: ShowCustomerList.isOpen()}" placeholder = "text" value = "{{getCustomerName}}"/>
</li>

My JavaScript/AngularJS code:

$scope.showCustomerList = function () {
    alert("This is the popup!");
};

Md Ashaduzzaman · Accepted Answer · 2014-06-09 21:17:06Z

3

I guess you are missing the ng-app directive or putting it inside the head tag. Try putting it inside the html tag or the body tag.

HTML :

<body ng-app="TestApp">
    <div  ng-controller="MyController">   
        <ul>
            <li ng-click="alertMe()"  class="clickable">Click me</li>
        </ul>
    </div>
</body>

myjs.js

var myModule = angular.module("TestApp", []);
myModule.controller("MyController", function($scope){
    $scope.alertMe = function(){
        alert("Hello Everyone");
    };
});

jsFiddle

edited Jun 9, 2014 at 21:17

answered Jun 9, 2014 at 21:11

Md Ashaduzzaman

4,0462 gold badges20 silver badges34 bronze badges

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

Comments

gkalpak · Accepted Answer · 2014-06-09 20:41:01Z

1

It should work fine. Take a look here.

answered Jun 9, 2014 at 20:41

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

4 Comments

ChaseHardin Over a year ago

This looks like it works in JSFiddle, but for some reason I can't get it to run in visual studio correctly. Any suggestions?

gkalpak Over a year ago

Sorry, I am not familiar with VS.

ChaseHardin Over a year ago

Okay, I also did this in other text editors and it gives the same result: Customer Info {{getCustomerName}}

gkalpak Over a year ago

You should post the HTML.

SeanPlusPlus · Accepted Answer · 2014-06-09 23:28:55Z

0

Try adding an ng-click directive to an anchor element:

<input readonly="readonly" ng-class="{editing: ShowCustomerList.isOpen()}" placeholder="text" value="{{getCustomerName}}"/>

<a href="" ng-click="showCustomerList()">Click Me</a>

edited Jun 9, 2014 at 23:28

answered Jun 9, 2014 at 20:38

SeanPlusPlus

9,10318 gold badges63 silver badges84 bronze badges

1 Comment

ChaseHardin Over a year ago

For some reason this still doesn't work. Any other suggestions? Thanks!

Collectives™ on Stack Overflow

Create popup with alert in AngularJS and JavaScript

3 Answers 3

Comments

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Related