如何使用 AngularJS（Django 框架）将值保存到数据库

Question

您好，我的项目使用 AngularJS 在 Django 框架上运行。我需要实现的是当我点击我的页面（html）上的提交时，它应该保存我输入到数据库中的所有值。我听说我只需要一个简单的提交按钮，主要更改在views.py 中。我对 Django 和 AngularJS 都很陌生。以下是我的代码。提前致谢。

HTML 和 AngularJS：

{% extends "base.html" %}
{% load static %}
{% block stylesheets %}
<link href="{% static 'css/xxg.css' %}" rel="stylesheet">


{% endblock %}

{% block mainbody %}

<br><br>
<div class="well">
        <div class="well" ng-controller="LayerCtrl">
            <table>
                <tr>
                    <td>
                        <div class="input-group">
                            <span class="input-group-addon">jj</span>
                            <select class="form-control" name="jj">
                                {% for f in fab %}
                                <option value="{{f}}">{{f}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </td>

                    <td>
                        <div class="input-group">
                            {% for f in jj%}
                            {% if f == '1' %}
                            <span class="input-group-addon">yy</span>
                            <select class="form-control" ng-model="rr" ng-options="l.value as l.label for l in yyy"></select>
                            {% endif %}
                            {% if f == '8' %}
                            <span class="input-group-addon">tt</span>
                            <select class="form-control" ng-model="selected_technode" ng-options="l.value as l.label for l in rrr"></select>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </td>

                    <td>
                        <div class="input-group">
                            <span class="input-group-addon">DD</span>
                            <!--<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
                            {%verbatim%}

                            <select class="form-control" ng-model="selected_dd" ng-options="l as l for l in tt"></select>
                            {%endverbatim%}
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <div><h3>history:</h3></div>
        <br/><br/>

        <div ng-controller="AlertDemoCtrl">

            <table class="table">

                {% verbatim %}

                <tr>

                    <td class="input-group" ng-repeat="(k,v) in alerts">

                        <span class="input-group-addon" ng-hide="v.hide">Check {{ k }}</span>
                    <span ng-hide="v.hide">
                    <input type="text" class="form-control" placeholder="Add gg here" ng-model="v.input">
                    <b>QQQ</b><input type="radio" name="{{ k }}" value="fc" ng-model="v.props">
                    <b>issue</b><input type="radio" name="{{ k }}" value="rr" ng-model="v.props">
                    <b>risk</b><input type="radio" name="{{ k }}" value="dr" ng-model="v.props">
                        <a type="reset" ng-click="reset()">
                            <span class="glyphicon glyphicon-repeat"></span>
                        </a>&nbsp;&nbsp;&nbsp;

                        <a href="" ng-click="remove(v)">
                            <span class="glyphicon glyphicon-trash"></span></a>
                        </span>
                        {% endverbatim %}
                <tr>
                    <td>
                        <button type="button" class='btn btn-info' ng-click="addAlert()">
                            <span class="glyphicon glyphicon-plus"></span>
                            &nbsp;Add</button>
                        <button type="reset" ng-click="reset()" class="btn btn-danger">
                            <span class="glyphicon glyphicon-repeat"></span>
                            &nbsp;Reset All</button>
                    </td>
                </tr>
            </table>
        </div>
        <table class="table">
            <!--IMPORT FILE-->
            <tr>
                <td>
                    <div style="position:relative;">
                        <a class='btn btn-primary' href='javascript:;' disabled>
                                           </td>
            </tr>

            <!--ADD COMMENTS-->

            <tr>
                <td>
                    Add Comments*<div class="span5"><textarea name="bugnote_text" placeholder="Add comments here (max=600 characters)" rows="3" class="span10 ng-pristine
                ng-valid ng-valid-maxlength" ng-maxlength="600"></textarea></div>
                </td>
                <td>
                    Add ftt*<input type="text" class="form-control" placeholder="Add ftthere">

                </td>
            </tr>
            <form ng-submit="submit()" ng-controller="ExampleController">
                <tr>
                    <td>
                        <button type="submit" id="submit" ngClick="Submit" class="btn btn-small btn-success"><span class="glyphicon glyphicon-pencil"></span>&nbsp;Submit</button>
                        <button class="btn btn-small btn-grey"><span class="glyphicon glyphicon-remove"></span>&nbsp;Cancel</button>
                    </td>

                </tr>
            </form>
        </table>
</div>

{% endblock %}


{% block extrascript %}


{{ ngapp }}.controller("LayerCtrl", function ($scope, $http, $resource){

var layerresource_url = $resource("{% url 'api_list' 'v1' 'layer' %}");



console.log('initializing....')

$scope.$watch('yy', function () {
<!--alert($scope.yy);-->
$scope.update_layer();
});

$scope.update_layer = function(){;
    console.log('Stage1: Initializing Primary Data... ');
    layerresource_url.get({techtype__contains: $scope.selected, limit:1500},
    function(data){
    $scope.list = data['objects'][0]['layer'];
    console.log($scope.layerlist);
},function(data, status){
    console.log('Stage1: Internal error while loading initial data:'+status );
    <!--alert('internal error');-->
}
);
};
});





{{ ngapp }}.controller("AlertDemoCtrl", function ($scope, $http, $resource){

    $scope.alerts = [];

    $scope.addAlert = function() {
    $scope.alerts.push({msg: 'Another alert!', props : 0, input : ""});
};

    $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
};

    $scope.reset = function() {
    angular.forEach($scope.alerts, function(v){
    v.input = "";
    v.props = 0;
});
};

$scope.remove = function(v){
    v.hide = 1;
}

$scope.reset();
});

{% endblock %}

Answer 1

如果您不想使用表单，可以使用 AJAX。在 AngularJS 中，它看起来像这样。请注意，您的控制器应该具有所需的参数：

$scope.addsomething = function() {
      token = $window.localStorage.token;
      //data to be submitted 
      $scope.data = {"name": $scope.name,"project": project_id,"some_url": someURL,"status": "1","type": 1};
      $http.defaults.headers.common.Authorization = 'token '+$window.localStorage.token;
      req = $http({
            method: "POST",
            url:"your_url/",
            data:$scope.data,
            headers: {
                'Content-Type': 'application/json'
            },
      });
      req.success(function(data,status) {
         //do something on success
      });
      req.error(function(data, status, headers, config) {
        //do something on error
      });
    }

在您的后端，您只需将此 URL 指向一个视图，该视图会将其保存在数据库中。希望这会有所帮助。