AngularJS: display a block of html after button click

Question

I am trying to write a controller to handle the button click of the "New" button. The goal is for the lower block of code (starting <div ng-show="buttonClick">) to be initially hidden. When "New" button is clicked I would like the lower block of code to appear.

The problem I'm having is that the lower block of code is visible when I load the page. It is never hidden.

{% extends "base.html" %}


{% block content %}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <h2>Ratings</h2>
        <table class="table table-bordered">
          <thead>
          <tr>
            <th>Beer Name</th>
            <th>Beer Rating</th>
            <th>Notes</th>
            <th>Brewer</th>
          </tr>
          </thead>
          <tbody>
          {% for rating in ratings %}
            <tr>
              <td>{{ rating.beer_name }}</td>
              <td>{{ rating.score }}</td>
              <td>{{ rating.notes }}</td>
              <td>{{ rating.brewer }}</td>
              <td><a href="{% url 'rating-edit' rating.id  %}" class="btn btn-primary" value="{{ rating.id }}" name="edit">Edit</a></td>
              <td><a class="btn btn-primary" href="{% url 'rating-delete' rating.id  %}" value="{{ rating.id }}" name="delete" >Delete</a></td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
        <div ng-app="myApp" ng-controller="myCtrl">
        <a ng-model="buttonClick" ng-click="is_clicked()" class="btn btn-primary">New</a>
      </div>
    </div>
  </div>






<div ng-show="buttonClick" >
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <h2>Enter a new rating</h2>
        <form role="form" method="post">
          {% csrf_token %}
          <p>Beer Name: {{ form.beer_name }}</p>
          <p>Score: {{ form.score }}</p>
          <p>Notes: {{ form.notes }}</p>
          <p>Brewer: {{ form.brewer }}</p>
          <p><button type="submit" class="btn btn-primary">Submit</button></p>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

<script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope){
          $scope.buttonClick = false;
          $scope.is_clicked = function() {
            $scope.buttonClick=true;
            console.log($scope.buttonClick)
         }
        })
</script>
{% endblock %}

@GG. The lower block is showing when I load the page. It is never hidden. — user3251349
– user3251349, Commented Apr 17, 2016 at 0:51
Are there any errors in your browser's console? If you add a console.log($scope.buttonClick) in your controller, what is logged? — GG.
– GG., Commented Apr 17, 2016 at 0:56
@GG. I added the line and ran it. Still no errors are appearing in my terminal. (That is where they'd appear?) — user3251349
– user3251349, Commented Apr 17, 2016 at 1:00
They would appear in your browser console (in Google Chrome: right click on your page > inspect an element > tab "console") — GG.
– GG., Commented Apr 17, 2016 at 1:03

GG. · Accepted Answer · 2016-04-17 01:17:24Z

1

On this line

app.controller('myCtrl', function($scope)) {

Remove the last )

When your code will work, you will probably have a "blink" effect with your block. It will appear at the loading of the page, then it will disappear when Angular will start. If you have the "blink" effect, you will need to add ng-cloack on the block.

<div ng-show="buttonClick" ng-cloak>

edited Apr 17, 2016 at 1:17

answered Apr 17, 2016 at 1:12

GG.

22k14 gold badges93 silver badges133 bronze badges

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

17 Comments

user3251349 Over a year ago

Okay! Awesome, now I'm free of that and getting new errors. haha

GG. Over a year ago

Ahah cool! You'll see that your browser console will help you a lot! :)

GG. Over a year ago

You can upvote my answer by clicking on the up-arrow on the left

user3251349 Over a year ago

Update: no more errors, but the code just doesn't hide the form.

GG. Over a year ago

Hello, in your last edit the div with ng-show="buttonClick" is outside of the application. It has to be inside <div ng-app="myApp" ng-controller="myCtrl">[HERE]</div>.

|

Jeffrey Coleman · Accepted Answer · 2016-04-17 00:52:05Z

0

I'd probably try it like this (untested):

<div ng-app="myApp" ng-controller="myCtrl">
       <div><a ng-click"buttonClick = !buttonClick" class="btn btn-primary">New</a></div>
       <script>
       var app = angular.module('myApp', []);
       app.controller('myCtrl', function($scope)) {
         $scope.buttonClick = false;
       }
       </script>

answered Apr 17, 2016 at 0:52

Jeffrey Coleman

1888 bronze badges

1 Comment

user3251349 Over a year ago

Thanks. I just gave that a try and it still isn't hidden. I hope I gave enough information in the post.

Collectives™ on Stack Overflow

AngularJS: display a block of html after button click

2 Answers 2

17 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related