Loading image at the time of onclick event using angularjs is not working

Question

I want to add data at the time of onclick event. Need to load image at the time of onclick event, after a small time interval add data. But my image is continuously loading. Any body give any suggestion.

My code is:

<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script language="javascript">
    function ContactController($scope) {
        $scope.contacts = [];    
        $scope.items = [ ];
        $scope.add = function() {
            setTimeout(function() {
                $scope.$apply(function() {
                    $scope.items[0].lateLoader = '  xxxx ';  
                });
            }, 1000);
            $scope.count=$scope.count+1;
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";
        }
    }
</script>
</head>
<body >
    <div ng-app="" ng-controller="ContactController">
        <p>{{items.lateLoader}} 
            <i ng-hide="items.lateLoader"><img src="Filling broken ring.gif"></i>
        </p>
        {{ contacts.length }}
        Content:<input type="text" ng-model="newcontact" />
        <button ng-click="add()">Add</button>
        <ul style="list-style-type: none;">
            <li ng-repeat="contact in contacts"> <input name="" type="checkbox" value="">{{ contact }}</li>
        </ul>
    </div>
</body>
</html>

You are using a very old version of Angular, and not instantiating correctly - I suggest you read some tutorials first and get the basic structure right. In addition, Angular provides a $timeout that plays better with the rest of Angular. — Simon H
– Simon H, Commented Dec 6, 2014 at 10:15

Bowdzone · Accepted Answer · 2015-11-19 08:50:30Z

In your example I found a lot of mistakes. The HTML tag is not defined at the top, wrong use of angularJs and Angular module is not created properly etc.

I fixed all the mistakes. I hope it can help you.

Plunkr link: http://plnkr.co/edit/no8WOHdEc9wc3dHzzITv?p=preview

 <!DOCTYPE html>
 <html ng-app="app">  
    <head>
      <title>Learning AngularJS</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
       <script >
       angular.module("app",[]).controller('ContactController',['$scope', 
        function($scope) {
         $scope.contacts = [];    
         $scope.items = [];
         $scope.add = function() {

         setTimeout(function() {
         $scope.$apply(function() {
         $scope.items.lateLoader = 'xxxx ';  
         });
         }, 1000);
       //$scope.count=$scope.count+1;
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
       }
     }
   ]);
  </script>
  </head>
<body >
 <div ng-controller="ContactController">
 <p>{{items.lateLoader}} 
   <i ng-hide="items.lateLoader">
      <img src="https://encrypted-tbn1.gstatic.com
     /images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM"> 
   </i>
 </p>
{{contacts.length}}
 Content:<input type="text" ng-model="newcontact" />
 <button ng-click="add()">Add</button>
  <ul style="list-style-type: none;">
  <li ng-repeat="contact in contacts"> 
  <input name="" type="checkbox" value="">{{ contact }}  
    </li>
  </ul>
    </div>
    </body>
 </html>

And for more detail of angularJs please visit these links:
(https://angularjs.org/)
(http://www.w3schools.com/angular/default.asp)

Collectives™ on Stack Overflow

Loading image at the time of onclick event using angularjs is not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related