CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-view
Prashant Patil
Prashant Patil

Reputation: 141

Angularjs View Not Updating, View Flickers on Button Click

I have written the following HTML & AngularJS code to update the Tree on HTML Page (View) on the Click of a Button.

When the Button is clicked, the changes appear for a fraction of second and disappear. I am not able to find the reason for this. Could you please let me know how I can overcome this problem?

Below is the HTML and JS Code. This is working in the Snippet Editor, but not in the Browser.

var module = angular.module('myapp', []);

module.controller("TreeCtrl", function($scope) {
  $scope.categories = [];


  $scope.$apply($scope.addTreeToView = function() {

    $scope.categories = [{
      title: 'Computers1',
      categories: [{
        title: 'Laptops1',
        categories: [{
          title: 'Ultrabooks1'
        }, {
          title: 'Macbooks1'
        }]
      }, {
        title: 'Desktops1'
      }, {
        title: 'Tablets1',
        categories: [{
          title: 'Apple1'
        }, {
          title: 'Android1'
        }]
      }]
    }, {
      title: 'Printers1',
      categories: [{
        title: 'HP1'
      }, {
        title: 'IBM1'
      }]
    }];



  });
});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Tree Example</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
  <div ng-app="myapp">
    <div class="col-sm-10 col-sm-offset-1" ng-controller="TreeCtrl">

      <form action="#" method="post" class="form-horizontal" id="commentForm" role="form">
        <div class="form-group" id="div_submitComment">
          <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-success btn-circle text-uppercase" type="submit" ng-click="addTreeToView()"><span class="glyphicon glyphicon-send" id="qazwsx"></span> Create Tree</button>
          </div>
        </div>
      </form>

      <div class="page-header">
        <h3 class="reviews">Tree</h3>
      </div>

      <script type="text/ng-template" id="categoryTree">
        {{ category.title }}
        <ul ng-if="category.categories">
          <li ng-repeat="category in category.categories" ng-include="'categoryTree'">
          </li>
        </ul>
      </script>

      <ul>
        <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
      </ul>


    </div>
  </div>
  <script src="self.js"></script>
</body>

Upvotes: 1

Views: 535

Answers (3)

Alex Nguyen
Alex Nguyen

Reputation: 1080

Because your html will be reloaded after you do "submit" action.So you have to replace "type="submit" by type="button" and disable "auto submit".

Upvotes: 1

Prashant Patil
Prashant Patil

Reputation: 141

I was using Form element type of Bootstrap. This has an action attribute. I removed the action attribute. Code works fine after removing it

       < form method = "post"
      class = "form-horizontal"
      id = "commentForm"
      role = "form" >
        < div class = "form-group"
      id = "div_submitComment" >
        < div class = "col-sm-offset-2 col-sm-10" >
        < button class = "btn btn-success btn-circle text-uppercase"
      type = "submit"
      ng - click = "addTreeToView()" > < span class = "glyphicon glyphicon-send"
      id = "qazwsx" > < /span> Create Tree</button >
        < /div>
        </div >
        < /form>

Upvotes: 1

lmcarreiro
lmcarreiro

Reputation: 5772

try removing type="submit" from the buttom

Upvotes: 2

Related Questions