AngularJS：ボタンをクリックした後にhtmlのブロックを表示します。

Question

「新規」ボタンのクリックを処理するコントローラを作成しようとしています。目標は、コードの下位ブロック（開始<div ng-show="buttonClick">）を最初に非表示にすることです。 「新規」ボタンをクリックすると、下のコードブロックが表示されます。

私が抱えている問題は、ページをロードするときにコードの下位ブロックが表示されることです。それは隠されることはありません。

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

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

は最後)

---

あなたのコードを削除しますあなたはうまくいくでしょうあなたのブロックにはおそらく "点滅"効果があります。ページの読み込み時に表示され、Angularが開始すると消えます。 「点滅」効果がある場合は、ブロックにng-cloackを追加する必要があります。

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

Answer 2

私はおそらく（未テスト）このようにそれを試してみた：この行で

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