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

刪除最後)

---

當你的代碼將工作，你w生病可能會對你的街區產生「眨眼」效果。它將出現在頁面的加載中，然後當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>