javascript - 如何在 django for 循环中显示/隐藏特定元素

Question

您好，我正在使用一些 AngularJS 在 Django 支持的网站上工作。我有如下的 django 模板

<div ng-app="MyApp" ng-controller="MyCtrl">
    <script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
    <div class="well ">
        {% for k, m in items %}
            <table ng-show="show" class="table table-bordered tbl" ng-cloak>
              <tr align="left">
                <span>
                    <button ng-click="show=!show" class="btn btn-default drop">
              ..............

和 Angular

{% block extra_js %}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('MyApp', []);

app.controller('MyCtrl', function($scope) {
    $scope.show = false;
});
</script>
{% endblock extra_js %}

我在这里尝试实现的是每当用户单击隐藏表内的按钮时，反之亦然。但是根据代码，当用户单击按钮时，所有表(请记住会有多个表，因为它在 for 循环中)被隐藏而不是那个特定的表。无论如何只隐藏那个特定的表？而不是所有的表？提前致谢。

Answer 1

推荐的做法是不使用 Django 模板，而是将变量作为 JSON 对象传递，让 Angular 完成所有模板。您可以通过 Ajax 发送它们，或者在最简单的情况下，将它们作为 Django 模板上下文传递，然后将它们添加到页面顶部内联脚本中的 window 对象。然后，您可以从 Angular Controller 中的 window 访问它们。这两种解决方案都会产生更简洁的代码，而第二种解决方案的实现不会比您现有的更费力。

如果您真的想继续沿着您所走的道路前进，您可以尝试以下方法。您的 javascript 变量 show 可能成为一个对象，您的 Django 对象 ID 作为键(不确定您在 {% for k, m in items 中迭代的 Django 对象到底是什么%} 循环，但你可以使用他们拥有的任何唯一 ID。)

所以它看起来像这样:

{% for k, m in items %}
    <table ng-show="show[{{ k }}]" class="table table-bordered tbl" ng-cloak>
        <tr align="left">
            <span>
                <button ng-click="show[{{ k }}] =! show[{{ k }}]" class="btn btn-default drop">

和

app.controller('MyCtrl', function($scope) {
   $scope.show = {};
});