AngularJS：点击按钮后显示html块

Question

我正在尝试编写一个控制器来处理 "New" 按钮的按钮点击。目标是最初隐藏较低的代码块（从 <div ng-show="buttonClick"> 开始）。单击 "New" 按钮时，我希望显示下面的代码块。

我遇到的问题是当我加载页面时下面的代码块是可见的。它从不隐藏。

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

我可能会这样尝试（未经测试）：

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

Answer 2

这条线

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

删除最后一个)

当您的代码正常工作时，您的代码块可能会产生 "blink" 效果。它会在页面加载时出现，然后在 Angular 开始时消失。如果你有 "blink" 效果，你需要在块上添加 ng-cloack。

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

AngularJS：点击按钮后显示html块

AngularJS: display a block of html after button click

angularjs

angularjs-scope

angularjs-controller