How to save values to database using AngularJS (Django Frame Work)

Question

Hi my project works on Django framework with some use of AngularJS. What I need to achieve is when I click on submit on my page(html), it should save all the values I entered into the Database. I heard that I just need a simple submit button and main changes are in views.py. I am very new to Django as well as AngularJS. The following is my codes. Thanks in advance.

Html and 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 %}

start by creating form properly. Suggest you study some basic form tutorials that include using django back end. Question is too broad, you need to narrow your issues down to more specific ones — charlietfl
– charlietfl, Commented Sep 14, 2015 at 6:02
Hi Charlietfl, am not using django-forms here. Just AngJS and views — gentle
– gentle, Commented Sep 14, 2015 at 6:03
Doesn't matter... form won't work as shown , it is invalid html and doesn't include the user input elements — charlietfl
– charlietfl, Commented Sep 14, 2015 at 6:06

Tim McNamara · Accepted Answer · 2015-12-16 02:44:30Z

2

You can use AJAX if you don't want to use forms. In AngularJS, it would look like this. Note your controller should have the needed arguments:

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

On your backend you just have to point this URL to a view which will save it in the database. Hope this helps.

edited Dec 16, 2015 at 2:44

Tim McNamara

18.5k5 gold badges54 silver badges84 bronze badges

answered Sep 14, 2015 at 6:29

Aameer

1,3761 gold badge11 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gentle Over a year ago

what is actually the project_id u mentioned?

Aameer Over a year ago

just a variable name, wanted to show how you can pass a variable value into data

Collectives™ on Stack Overflow

How to save values to database using AngularJS (Django Frame Work)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related