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>