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.AngularJS: Anzeige eines HTML-Blocks nach dem Klicken auf die Schaltfläche
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 %}
Was funktioniert nicht? –
@GG. Der untere Block wird angezeigt, wenn ich die Seite lade. Es ist nie versteckt. – user3251349
Gibt es Fehler in der Konsole Ihres Browsers? Wenn Sie eine 'console.log ($ scope.buttonClick)' in Ihrem Controller hinzufügen, was wird protokolliert? –