CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
ChaseHardin
ChaseHardin

Reputation: 2269

Create popup with alert in AngularJS and JavaScript

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!");
};

Upvotes: 0

Views: 14099

Answers (3)

SeanPlusPlus
SeanPlusPlus

Reputation: 9053

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>

Upvotes: 0

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

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

Upvotes: 3

gkalpak
gkalpak

Reputation: 48211

It should work fine. Take a look here.

Upvotes: 1

Related Questions