Python 在django和angular中提交表单后，保持在同一选项卡上

我有一个

boards.html

页面，在该页面上我有3个选项卡（用angular编写）；你的董事会，加入董事会，并创建董事会。在Join Board选项卡下有一个Join Board按钮（这是一个django函数），单击该按钮后，将重新加载页面，使其返回默认的Your Boards选项卡，我希望它保持在Join Board选项卡上。下面是我的一些代码：

app.js TabController

app.controller('TabController', ['$scope', '$http', function($scope, $http){
    this.tab = 1;
    this.setTab = function(newValue){
        this.tab = newValue;
    };

    this.isSet = function(tabName){
        return this.tab === tabName;
    };
    $http.get('/checklogin/').success(function(data) {
        console.log('Current User: ' + data.user_id);
        $scope.user = data;
        $scope.userid = data.user_id;
    }).error(function(data) {
        console.log('error: ' + data);
    });

}]);

views.py连接板功能

def join_board(request, board):
    boardObj = Board.objects.get(board_name=board)
    if Profile.objects.filter(pk=request.user.profile.id, boards__pk=boardObj.id).exists():
        messages.error(request, 'Cannot join a board you are already a member of.')
    else:
        request.user.profile.boards.add(boardObj)
        boardMemberGroup = Group.objects.get(name=board + ' member')
        request.user.groups.add(boardMemberGroup)
    return boards(request)

boards.html的相关部分

<section ng-controller="TabController as tab">
<ul class="nav nav-pills nav-justified">
    <li ng-class="{ active:tab.isSet(1) }">
        <a href ng-click="tab.setTab(1)">Your Boards</a>
    </li>
    <li ng-class="{ active:tab.isSet(2) }">
        <a href ng-click="tab.setTab(2)">Join Board</a>
    </li>
    <li ng-class="{ active:tab.isSet(3) }">
        <a href ng-click="tab.setTab(3)">Create Board</a>
    </li>
</ul>

<!--  Your Boards Tab's Content  -->
<div ng-show="tab.isSet(1)">
    ...
</div>
<!--  Join Board Tab's Content  -->
<div ng-show="tab.isSet(2)">
    <h2>Boards you can join</h2>
    {% if found_entries %}
        {% for board in found_entries %}
            <h4> {{board.board_name}} </h4>
            <form action="/join/{{board.board_name}}/">
                {% csrf_token %}
                {% if board not in userBoards %}
                    <button id="join" type="submit" value="Delete"> {% trans "Join Board" %} </button>
                {% endif %}
            </form>
        {% endfor %}
    {% else %}
            <h4> No Boards Found </h4>
    {% endif %}
</div>
</section>

...
你可以加入的董事会
{%if-find_-entries%}
{在找到的_条目%中，线路板的百分比为%}
{{board.board_name}
{%csrf_令牌%}
{%如果线路板不在用户线路板%}
{%trans“加入板”%}
{%endif%}
{%endfor%}
{%else%}
找不到木板
{%endif%}

我试过了

<form action="/join/{{board.board_name}}/" ng-class="tab.setTab(2)">

---

这会在我点击Join board按钮或刷新页面后将其保留在Join Boards选项卡上，但也会使其保留在其他选项卡上。我读过关于使用ngCookie的文章，但是我所有的标签都在同一个html页面上，所有这些例子都是为了记住用户名或者如果有人登录，这与我的问题无关。此外，我还试图避免使用jQuery，因此我希望您能对Angular和/或Django提供任何建议。

您的整个页面正在重新加载。这意味着您将丢失页面上的所有信息，除非您将其存储在某个位置。如果您想继续使用Django表单，我建议将查询参数添加到角度路由中，以便在加载页面时可以直接跳到那里

您的url看起来像

www.awesomeboards.com/boards？tab=2

，然后查看控制器加载时的参数，然后切换到这些参数

---

否则，您可以查看，特别是表单上的。我没有用过，但可能会有帮助？

你愿意在棱角的一侧构建表单吗？如果您要删除django表单并使用带有ngClick指令的angular表单，则可以将数据作为json传递回django，而无需重新加载页面。也许您已经考虑过了？是的，这是我可以做的，唯一的一件事是使用Django与数据库交互要容易得多。我发现Angular很容易将内容显示在前端，但要将这些更改显示在数据库中是一件棘手的事情@jwm我是否必须在

url.py

？@catherine中更改我的url模式可能值得使用Angular js（可能是ui路由器）来处理每个应用程序/项目的url。这是我觉得最容易的。我希望你能把它全部保存在

url.py

，我帮不上忙。以前我曾尝试在选项卡中添加哈希，使url看起来像

www.awesomeboards.com/boards/#tab2

，当我单击不同的选项卡时，它更改了url，但当我尝试用不同的选项卡名称直接键入url时，它不会改变页面上的选项卡。查询参数也会有同样的问题吗？您需要自己为您的设置进行调查。我们的网站就像www.awesomeboards.com/boards/#site？tab=tab2，让我们刷新一下。找到答案最快的方法就是试试。好的，谢谢你的建议！我希望将URL保存在

urls.py

中，但我将探索更多方法来合并angular和查询参数