如何使用angular和django

时间：2016-06-14 12:44:06

标签： python angularjs django

问题我希望能够在我的图纸类中添加多个尺寸（尺寸等级）。我想做的是将其传递给角度然后回到Django如果可能我只需要帮助/指导如何做到这一点我看了无数的博客仍然无法提出正确的方式这样做任何帮助将非常感谢。

这是我的表格模型和维度模型（model.py）

class Sheet(models.Model): 
    drawing_number = models.CharField(max_length=255) 
    drawing_revision = models.CharField(max_length=255) 
    heat_number = models.CharField(max_length=255) 
    note = models.CharField(max_length=255) 
    valc = models.CharField(max_length=255) 

class Dimension(models.Model): 
   description = models.CharField(max_length=255) 
   style = models.CharField(max_length=255) 
   target = models.IntegerField() 
   upper_limit = models.IntegerField() 
   lower_limit = models.IntegerField()

这是我的view.py with sheet_from_create方法和我的测试方法，用于添加一个无效的dim。

def sheet_form_create(request): 

        if request.method == 'GET': 
          sheet_form = SheetForm() 

        else: 
          sheet_form = SheetForm(request.POST) 
          cust_int = Customer.objects.latest('id').id 
          cust_int_plus = int(cust_int) + 1 
          c_date = datetime.now() 
          u_date = datetime.now() 


          if sheet_form.is_valid(): 
            drawing_number = sheet_form.cleaned_data['drawing_number'] 
            drawing_revision = sheet_form.cleaned_data['drawing_revision'] 
            heat_number = sheet_form.cleaned_data['heat_number'] 
            note = sheet_form.cleaned_data['note'] 
            valc = sheet_form.cleaned_data['valc'] 

            try: 
              get_cust = Customer.objects.filter(customer_name=customer_name).exists() 
            except: 
              get_cust = False 
            if get_cust == True: 
               c = Customer.objects.get(customer_name=customer_name) 
               c_id = c.customer_id 
            else: 
               creat_cust = Customer.objects.create(id=cust_int_plus, customer_id=cust_int_plus, customer_name=customer_name) 
               c_minus = cust_int_plus 
               c = Customer.objects.get(id=c_minus) 
               c_id = c.customer_id 

            sheet = Sheet.objects.create( 

              drawing_number=drawing_number, 
              drawing_revision=drawing_revision, 
              heat_number=heat_number, 
              note=note, 
              valc=valc, 
              customer_id=c_id) 
            return render(request, 'app/sheet.html') 
        return render(request, 'app/sheet_form_create.html', { 
          'sheet_form': sheet_form, 
          'title':'New Sheet', 

        })

我用ajax尝试了这个没有运气它不会渲染我的dim.html

        def add_dimensions(request): 
            data = {} 
            if request.method == 'POST': 
              dim_form = DimForm(request.POST) 
              if dim_form.is_valid(): 
                dim = Dimension() 
                description = dim_form.cleaned_data.get['description'] 
                style = dim_form.cleaned_data.get['style'] 
                target = dim_form.cleaned_data.get['target'] 
                upper_limit = dim_form.cleaned_data.get['upper_limit'] 
                lower_limit = dim_form.cleaned_data.get['lower_limit'] 

                dim.save() 
                data['description'] = dim.description; 
                data['style'] = dim.style; 
                data['state'] = "ok"; 
                return HttpResponse(json.dumps(data), mimetype="application/json") 
              else: 
                 data = 'fail' 
                 return render(request, 'app/sheet_form_create.html') 
            else: 
              dim_form = DimForm() 
              return render(request, 'app/dim.html', {'dim_form': dim_form})

这是我的sheet_form_create.html这是我希望我的dim.html在其中呈现的地方

 {% extends "app/layout.html" %} 
        {% load crispy_forms_tags %} 
        {% block content %} 



        <br /> 
        <br /> 
        <br /> 



        <div class="row" > 
          {% crispy sheet_form %} 
        </div> 

        <body ng-app="dim_app"> 
         <!-- render my dim.html here somehow --> 
          <div ng-controller="DimCtrl"> 
              <div class="data"> 
              </div> 
              <button ng-click="save()">Click</button> 
          </div> 

        </body> 
        {% endblock %}

这是我的dim.html

        {% extends "app/layout.html" %} 
        {% load crispy_forms_tags %} 
        {% block content %} 



        <br /> 
        <br /> 
        <br /> 


        <div class="row" > 
          {% crispy dim_form %} 
        </div> 

        {% endblock %}

最后但并非最不重要的是，我目前为测试目的而使用的角度代码是我最困惑的地方

dim_app = angular.module('dim_app', []); 


dim_app.controller('DimCtrl', ['$scope', function($scope) { 
    $scope.num = 0; 
    $scope.save = function () { 
        $(".data").html("click:" + $scope.num); 
        //some how load dim.html in here how ever many times its clicked example they click 5 times render dim.html five times and save each on as a child record of sheet 
        $scope.num += 1; 
    }; 

}]);

这是我希望它看起来像

的一个例子

1 个答案:

答案 0 :(得分：0)

我明白了。

这是我的角度代码

dim_app = angular.module（＆＃39; dim_form＆＃39;，[]）

  .controller('dim_ctrl', ['$scope', '$compile', function ($scope, $compile) { 

      $scope.show_dim = function () { 
          var comp = $compile("<div </div>")($scope); 
          $("#id").append(comp); 
      }; 
  }]) 
  .directive('myDim', function () { 
      return { 
          templateUrl: '/sheet/sheet_form_create.html/_dim' 

      }; 
  });

这是我的sheet_form_create.html

    {% extends "app/layout.html" %} 
    {% load crispy_forms_tags %} 
    {% block content %} 



    <br /> 
    <br /> 
    <br /> 



    <div class="row" > 
      {% crispy sheet_form %} 
    </div> 

    <body ng-app="dim_form"> 
      <div ng-controller="dim_ctrl"> 
          <a href="#" ng-click="show_dim()">show</a> 
          <div id="d"></div> 
      </div> 
    </body> 

    {% endblock %}