2016-02-26 78 views
1

您好,我正在使用Django支持的一些AngularJS网站。我有Django的模板如下如何在django for循环中显示/隐藏特定元素

<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作为关键字(不知道到底是什么Django的对象是你迭代通过您{% for k, m in items %}循环,但是你可以使用他们有任何唯一的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 = {}; 
}); 
1

这已经有一段时间了,但如果我没有记错的话,你会想要在你的桌子上添加一个班级,将其识别为你想要隐藏的班级。然后在那里你有按钮。在点击时,你可以做一些事情来让element.closest抓住你点击的按钮的父表。从那里你可以调用.toggle()如果没有其他的东西,Django使用field_name_1..2..3保持表id的状态,这样你就可以将类分配给按钮并获取附加的数字并将其用作标识符但是这是一种马虎。

+0

@Objective:u能告诉我一个例子 – vellattukudy