AngularJS: Anzeige eines HTML-Blocks nach dem Klicken auf die Schaltfläche

Question

Ich versuche, einen Controller zu schreiben, um die Schaltfläche klicken Sie auf die Schaltfläche "Neu". Das Ziel ist, dass der untere Codeblock (beginnend mit <div ng-show="buttonClick">) zunächst ausgeblendet wird. Wenn die Schaltfläche "Neu" angeklickt wird, möchte ich den unteren Codeblock sehen.

Das Problem, das ich habe, ist, dass der untere Block des Codes sichtbar ist, wenn ich die Seite lade. Es ist nie versteckt.

{% 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 %} 

Answer 1

Auf dieser Linie

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

entfernen die letzten )

---

Wenn Ihr Code wird funktionieren, du w Wahrscheinlich haben Sie einen "blink" -Effekt mit Ihrem Block. Es erscheint beim Laden der Seite, dann verschwindet es, wenn Angular startet. Wenn Sie den "Blink" -Effekt haben, müssen Sie ng-cloack auf dem Block hinzufügen.

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

Answer 2

Ich würde wahrscheinlich wie diese versuchen, es (nicht getestet):

<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>