Question

页面应该在表格中显示数据库的内容，其中包含＆＃34; New＆＃34;按钮向数据库添加新条目。当用户点击＆＃34;新＆＃34;按钮，下面是一个表格。它是一个ModelForm，供用户输入一个新的条目到模型，然后通过＆＃34;提交＆＃34;按钮如下。这是按预期工作的，直到我添加一个AngularJS控制器来处理＆＃34; New＆＃34;的按钮点击。问题是我的＃34;提交＆＃34;按钮不起作用。我希望它将数据提交给ModelForm，但似乎什么都不做。

这是我的模板：

{% 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 %}

和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'),
]

提交按钮的views.py：

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

您应该处理提交带角度

的表单

<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>

或

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

和你的控制器：

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) } })

<强>更新

Here是角度$ http服务的好教程！

AngularJS和ModelForm：提交按钮不起作用

1 个答案: