Question

在我的项目中使用Django。我有一个resources.py（JSON文件），它包含了我在数据库中所需的所有数据。

我有一个html文件，其中包含几个下拉按钮，我的目标是，一旦我选择一个下拉选项，它将传递该值并动态获取连续下拉按钮的值。

我的HTML：

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

            <td>
                <div class="input-group">
                    <span class="input-group-addon">Technode</span>
                    <select class="form-control" ng-model="selected_technode" ng-options="l.value as l.label for l in technodes"></select>
                </div>
            </td>

            <td>
                <div class="input-group">
                    <span class="input-group-addon">Layer</span>
                    <!--<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
                    {%verbatim%}
                    <!--<select class="form-control"  name="layer" >-->
                        <!--<option ng-repeat="l in layer_list" value="{{l}}">{{l}}</option>-->
                    <!--</select>-->
                    <select class="form-control" ng-model="selected_layer" ng-options="l as l for l in layerlist"></select>
                    {%endverbatim%}
                </div>
            </td>
        </tr>
    </table>
        </div>

和我的JS：

{{ 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');
          }
      );
    };
});

我需要从technode下拉按钮传递值get，并在lalyer下拉框中显示相应的结果。我怎样才能做到这一点？提前谢谢。

EDITTED

现在我在JS文件中硬编码了选项。但我需要以python方式替换这些选项（就像我做的那样获得工厂）。怎么做？

Answer 1

选择字段的用法是：

<select
  ng-model="string"
  [name="string"]
  [required="string"]
  [ng-required="string"]
  [ng-change="string"]
  [ng-options="string"]>
...
</select>

以下是文档：https://docs.angularjs.org/api/ng/directive/select

<select class="form-control" ng-model="selected_technode" name="technode">
                {% for t in technode %}
                <option  value="{{f}}">{{t}}</option>
                {% endfor %}
            </select>

在您的控制器中，您可以观察更改并触发ajax呼叫：

$scope.$watch('selected_technode', function (newVal) {
    updateLayer(newVal);
});

function updateLayer(technode) {
    var m = $resource(layerresource_url);
    var data = m.get({format: json, techtype__contains: technode});
    $scope.layer = data.objects[0];
}

如何传递Json值并获取相应的数据

EDITTED

1 个答案: