Question

我正在为我的项目使用AngularJS / Django / Python。我的一个页面通过输入字段和单选按钮从用户那里获取输入，并且需要将这些值存储到数据库中。我怎么能用AngularJS做到这一点？提前致谢。

html和JS：

{% block extrascript %}


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

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

  $scope.technodes = [
     {'value': 22, 'label': 22},
     {'value': 28, 'label': 28},
  ];

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

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

  $scope.update_layer = function(){
    console.log('Stage1: Initializing Primary Data... ');
    layerresource_url.get({techtype__contains: $scope.selected_technode, limit:1500},
      function(data){
        $scope.layerlist = 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 %}

.js文件：

class CheckBinningView(JSONResponseMixin, ListView):

    template_name = "orc_enable.html"
    model = OrcRecord

    def get_context_data(self, *args, **kwargs):
        context = super(CheckBinningView, self).get_context_data(*args, **kwargs)
        fab = GroupProfile.objects.get(id=self.request.session['ACL_gid']).fab

        gp = GroupProfile.objects.get(id=self.request.session['ACL_gid'])
        layer = []
        technode = []
        for l in self.model.objects.raw('SELECT distinct layer, id FROM orc_orcrecord GROUP BY layer'):
            layer.append(l.layer)

        if fab == "ALL":

            SQL = "SELECT distinct process_id, id FROM orc_orcrecord GROUP BY process_id"
        else:
            SQL = "SELECT distinct process_id, id FROM orc_orcrecord \
                   WHERE process_id LIKE '0" + fab +"%%' or process_id LIKE '" + fab + "%%' GROUP BY process_id"

        print SQL

        for t in self.model.objects.raw(SQL):

            sql = "SELECT distinct process_id, id FROM orc_orcrecord GROUP BY process_id"
        else:
            sql = "SELECT distinct process_id, id FROM orc_orcrecord \
                   WHERE process_id LIKE '0" + fab +"%%' or process_id LIKE '" + fab + "%%' GROUP BY process_id"

        print sql

        for t in self.model.objects.raw(sql):


            try:
                technode.append(t.get_technode)
            except Exception, e:
                print e
                continue

        # for t in self.model.objects.filter(process_id__startswith=fab, is_main_record=True,
        #                                    mantis_id__isnull=False).values_list('id', flat=True).order_by('id').distinct()[:100]:
        #     technode.append(self.model.objects.get(id=t).get_technode)

        # context['technode'] = gp.technology
        context['fab'] = gp.fab
        context['technode'] = list(set(technode))
        # context['layer'] = list(set(layer))
        context['technode'] = list(set(technode))
        context['ngapp'] = "CMOD"
        return context

和我的view.py

var table3Join =
    Table2
    .GroupJoin(
        Table3,
        ttwo => ttwo.Id,
        tthree => tthree.Table2Id,
        (ttwo, tthree) => new { ttwo = ttwo , tthree = tthree }
    );

var sqlQuery = 
    Table1
    .GroupJoin(
        table3Join, 
            tone => tOne.Id,
            twwo => twwo.ttwo.Table1Id,
            (tone, ttwo) => new { tone = tone, ttwo = ttwo }
    ).ToList();

var tableResults = sqlQuery.Select(r => new TableResult1
{
    Key = r.tone.Id,
    ListTableResult2 = r.ttwo.Select(ttwo => new TableResult2
    {
        Key = ttwo.ttwo.Id,
        ListTableResult3 = ttwo.tthree.Select(tthree => new TableResult3
        {
            Key = tthree.Id
        }).ToList()
    }).ToList()
});

Answer 1

您应该查看此link about forms

会给你关于ng-model的想法。然后你去结束点，当你使用它时看到这个resource api。

您可以轻松使用：

   var layerresource_url = $resource("{% url 'api_dispatch_list' 'v1' 'layer' %}");
   layerresource_url.field1 = "teste";
   layerresource_url.field2 = true;
   layerresource_url.field1.$save();
   //will make a post to the URL passed in $resource

如果您想进行一些自定义：

   var layerresource_url = $resource("{% url 'api_dispatch_list' 'v1' 'layer' % , 
                                      {},{ save:{method:'POST'}}
                                      }");

所以你可以使用：

  layerresource_url.save(model)

请阅读有关资源的链接。

您还必须设置服务器端以接受帖子。

Answer 2

这里有很多步骤。

您的服务器（Django）需要可以从客户端接收-webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%);。
您的客户需要捕获用户输入。 Angular是一种方式，但绝不是唯一的方法。如果您正在努力解决这个问题，那么jQuery就更容易使用了。如果您要坚持使用Angular，请像Alvaro提到的那样POST。
您需要制作ng-model。在Angular中，您可以使用POST和$resource执行此操作。两者都有很好的记录。你想要的只是香草$http，没什么特别的。确保您的表单内容在帖子正文中。
您可能会遇到内容类型问题...如果您正在使用js，那么您可能希望将您的ContentType设置为POST。

如何使用AngularJS将数据从html添加到数据库？

2 个答案: