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.
你好，我的项目在Django框架上使用了一些AngularJS。我需要实现的是，当我在我的页面(html)上单击submit时，它应该保存我输入到数据库中的所有值。我听说我只需要一个简单的提交按钮，主要的修改在view .py中。我对Django和AngularJS都很陌生。下面是我的代码。提前谢谢。
Html and 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>
<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>
Add</button>
<button type="reset" ng-click="reset()" class="btn btn-danger">
<span class="glyphicon glyphicon-repeat"></span>
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> Submit</button>
<button class="btn btn-small btn-grey"><span class="glyphicon glyphicon-remove"></span> 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 %}
1 个解决方案
#1
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:
如果不想使用表单，可以使用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
});
}
On your backend you just have to point this URL to a view which will save it in the database. Hope this helps.
在您的后端，您只需将这个URL指向一个视图，该视图将它保存到数据库中。希望这个有帮助。
#1
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:
如果不想使用表单，可以使用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
});
}
On your backend you just have to point this URL to a view which will save it in the database. Hope this helps.
在您的后端，您只需将这个URL指向一个视图，该视图将它保存到数据库中。希望这个有帮助。