如何传递Json值并获取各自的数据

Question

Am using Django in my project. I have a resources.py(JSON file) which consists of all my required data from the database.

I have an html file which consists of several dropdown buttons, my aim is to once I select one dropdown option it will pass that value and get values for successive dropdown button dynamically.

My 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>

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

I need to pass the value get from the technode dropdown button and display the respective results in lalyer dropdown box. How can I do that? Thanks in advance.

EDITTED

Now I hardcoded the options in JS file. But I need to replace this options in python way (Like I did to get the fab). How to do that?

Answer 1

The usage for select fields is:

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

Here is the documentation: 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>

In your controller you can watch for changes and trigger an ajax call:

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