AngularJS und ModelForm: Übermittlungsschaltfläche funktioniert nicht

Question

Die Seite soll den Inhalt der Datenbank in einer Tabelle anzeigen, mit einer Schaltfläche "Neu", um der Datenbank einen neuen Eintrag hinzuzufügen. Wenn der Benutzer auf die Schaltfläche "Neu" klickt, wird unten ein Formular angezeigt. Es ist ein ModelForm für den Benutzer, um einen neuen Eintrag in das Modell einzugeben und dann über einen "Submit" -Button unten zu senden. Dies funktionierte wie erwartet, bis ich einen AngularJS-Controller hinzufügte, um den Knopfklick von "Neu" zu handhaben. Das Problem ist, dass meine "Senden" -Schaltfläche nicht funktioniert. Ich möchte, dass es die Daten an die ModelForm sendet, aber es scheint nichts zu tun.

Hier ist meine Vorlage:

{% extends "base.html" %} 


{% block content %} 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-10 col-sm-offset-1"> 
     <h2>Ratings</h2> 
     <table class="table table-bordered"> 
     <thead> 
      <tr> 
      <th>Beer Name</th> 
      <th>Beer Rating</th> 
      <th>Notes</th> 
      <th>Brewer</th> 
      </tr> 
     </thead> 
     <tbody> 
      {% for rating in ratings %} 
      <tr> 
      <td>{{ rating.beer_name }}</td> 
      <td>{{ rating.score }}</td> 
      <td>{{ rating.notes }}</td> 
      <td>{{ rating.brewer }}</td> 
      <td><a href="{% url 'rating-edit' rating.id %}" class="btn btn-primary" value="{{ rating.id }}" name="edit">Edit</a></td> 
      <td><a class="btn btn-primary" href="{% url 'rating-delete' rating.id %}" value="{{ rating.id }}" name="delete" >Delete</a></td> 


      </tr> 
      {% endfor %} 
      </tbody> 
     </table> 
     <div ng-app="myApp" ng-controller="myCtrl"> 
      <a ng-model="buttonClick" ng-click="is_clicked()" class="btn btn-primary">New</a> 


      <div ng-show="buttonClick" ng-cloak> 
      <div class="container-fluid"> 
       <div class="row"> 
       <div class="col-sm-10 col-sm-offset-1"> 
        <h2>Enter a new rating</h2> 
        <form role="form" method="post"> 
        {% csrf_token %} 
        <p>Beer Name: <input type="text" ng-model="myForm.beer_name"></input></p> 
        <p>Score: <input type="number" step="0.1" ng-model="myForm.score"></input></p> 
        <p>Notes: <input type="text" ng-model="myForm.notes"></input></p> 
        <p>Brewer: <input type="text" ng-model="myForm.brewer"></input></p> 
        <p><button ng-click="submit_to_form(myForm)" type="submit" class="btn btn-primary">Submit</button></p> 
        </form> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

    <script> 
    var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope, $http){ 
    $scope.myForm = {beer_name:'beer_name', score:'score', notes:'notes', brewer:'brewer'}; 
    $scope.buttonClick = false; 
    $scope.is_clicked = function() { 
     $scope.buttonClick=true; 
     console.log($scope.buttonClick) 
    } 
    $scope.submit_to_form = function(data) { 
     $http.post('rating-home', data); 
    } 
    }) 
    </script> 
    {% endblock %} 

Und urls.py:

from django.conf.urls import url 
from django.contrib import admin 

from ratings.views import home, RatingCreate, delete, edit 

urlpatterns = [ 
    url(r'^admin/', admin.site.urls), 
    url(r'^$', RatingCreate.as_view(), name='rating-home'), 
    url(r'rating/add/$', RatingCreate.as_view(), name='rating-add'), 
    url(r'rating/delete/(?P<row_id>[0-9]+)/$', delete , name='rating-delete'), 
    url(r'rating/edit/(?P<row_id>[0-9]+)/$', edit , name='rating-edit'), 
] 

Und views.py für den Submit-Button:

class RatingCreate(View): 
    """ Create a new Rating """ 
    form_class = RatingForm 
    template_name = 'home.html' 

    def get(self, request): 
     form = self.form_class() 
     context = {'ratings': Rating.objects.all(), 'form': form} 
     #return render(request, 'home.html', context) 
     return render(request, self.template_name, context) 

    def post(self, request): 
     form = self.form_class(request.POST) 
     if form.is_valid(): 
      _ = form.save() 
      return redirect('rating-home') 
     return render(request, self.template_name, {'form: form'}) 

Answer 1

Sie behandeln soll das Formular abschicken mit Winkel

<form ng-submit="myFunc(myData)"> 
    <input type="text" ng-model="myData.name"> 
    <input type="text" ng-model="myData.phone"> 
    <button type="submit">Submit</button> 
</form> 

OR

<form > 
    <input type="text" ng-model="myData.name"> 
    <input type="text" ng-model="myData.phone"> 
    <button ng-click="myFunc(myData)">Submit</button> 
</form> 

und dem Controller:

var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope){ 
    $scope.myData= {name:'' , phone:''}; 
    $scope.myFunc = function(data) { 
     console.log(data); 
     // data(myData array) can be send with angular $http.post() method 
     // e.g. : $http.post('/myUrl/', data) 
    } 
    }) 

Update:

Here ist ein gutes Tutorial für Winkel $ http-Service!