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

Posted 2023-02-24

【中文标题】如何在 django for 循环中显示/隐藏特定元素

【英文标题】：How to ng-show/hide specific elements inside a django for loop

【发布时间】：2016-06-09 03:00:39

【问题描述】：

您好，我正在使用一些 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">
              ..............

和 angularjs

% 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 循环内）隐藏而不是那个特定的表。反正有没有只隐藏那个特定的表？而不是所有的桌子？提前致谢。

【参考方案1】：

推荐的方法是不要使用 Django 模板，而是将变量作为 JSON 对象传递，让 Angular 完成所有模板。您可以通过 Ajax 发送它们，或者在最简单的情况下，只需将它们作为 Django 模板上下文传递，然后将它们添加到页面顶部内联脚本中的 window 对象即可。然后，您可以从 Angular 控制器中的 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 = ;
);

【参考方案2】：

已经有一段时间了，但如果我没记错的话，你会想要在你的表中添加一个类，以将它标识为你想要隐藏的类。然后在那里你有按钮。单击时，您执行的操作效果为 element.closest 抓取您单击的按钮的父表。从那里您可以调用 .toggle() 如果没有别的，Django 使用 field_name_1..2..3 保持表 ID 的状态，因此您可以将类分配给按钮并获取附加到它的数字并将其用作标识符但这有点草率。