私はboards.html
ページを持っています。そのページには3つのタブがあります。あなたのボード、ボードに参加し、ボードを作成します。 Join Boardタブの下にJoin Boardボタン(djangoの機能)があります。クリックするとページがリロードされてデフォルトのYour Boardsタブに戻りますので、Join Boardタブに残しておきます。ここに私のコードのビットは次のとおりです。フォームがdjangoで投稿された後、同じタブに留まる
は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 join_board機能I「は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>
の
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)
関連する部分をapp.js試しました
<form action="/join/{{board.board_name}}/" ng-class="tab.setTab(2)">
これはボードに参加ボタンをクリックしたりページを更新した後に[ボードを結合する]タブに表示されますが、他のタブには表示されません。私はngCookieの使い方について読んだことがあるが、すべてのタブは同じHTMLページにあり、これらの例はすべてユーザ名を覚えていたか、誰かがログインしていて問題がない。また、私はjQueryを避けようとしているので、Angularおよび/またはDjangoを使用することをお勧めします。
角度のある側面にフォームを作成することはできますか? djangoフォームを削除し、ngClickディレクティブで角度のあるフォームを使用する場合は、ページをリロードせずにjsonとしてdjangoにデータを戻すことができます。おそらくあなたはすでにこれを考慮したでしょうか? – JwM
これは私ができることですが、唯一のことはDjangoを使ってデータベースとやりとりする方がはるかに簡単だということです。私はAngularがフロントエンドに表示されることは簡単だが、データベースに表示されるように変更するのは難しい@JWM – Catherine