Question

我已经想出如何使用Angular从数据库中填充第一个下拉菜单，但我仍然坚持如何获取第一个下拉框的选定值来查询以填充第二个框。此外，如果数据位于单独的表中，每次选择下拉列表时，是否必须进行API调用？我已经看到很多使用预设表执行此操作的示例，但没有使用实际的api调用。这是我感到困惑的地方。

这就是我现在所拥有的。

app.controller('SelectOptGroupController', function($scope,$http) {
        $http.get('api2.php').
        success(function(data) {
            $scope.animals = data;
        });
         $scope.species= [];
         $scope.getOptions2 = function(){
            //NOT SURE FROM HERE
          };

  })

HTML文件

<div ng-controller="SelectOptGroupController" class="md-padding selectdemoOptionGroups">
          <div>
            <h1 class="md-title">Select Animal</h1>
            <div layout="row">
              <md-select ng-model="animals" placeholder="Animals" ng-change="getOptions2()">
                <md-option ng-repeat="animal in animals" value="{{animal.animal}}">{{animal.animal}}</md-option>
              </md-select>
              <md-select ng-model="species" placeholder="Species">
                <md-option ng-repeat="spec in species" value="{{spec.animal_species}}">{{spec.animal_species}}</md-option>
              </md-select>

          </div>
        </div>

截至目前，数据库有一个表，其中两列是animal和animal_species。同一动物有多种物种，例如有三种动物名称为熊的插入物，但每种动物物种都有不同的灰熊，黑色和极地。谢谢你的帮助！

Answer 1

对于您的第一个问题，md-select的ng-model将对应于集合中的选定动物，因此在此示例中$ scope.model.selectedAnimal将是您可以用来访问所选动物的变量。

<div ng-controller="SelectOptGroupController" class="md-padding selectdemoOptionGroups">
    <div>
        <h1 class="md-title">Select Animal</h1>
        <div layout="row">
            <md-select ng-model="model.selectedAnimal" placeholder="Animals" ng-change="getSpecies()">
                <md-option ng-repeat="animal in model.animals" value="{{ animal }}">{{ animal }}</md-option>
            </md-select>
            <md-select ng-model="model.selectedSpecies" placeholder="Species">
                <md-option ng-repeat="species in model.species" value="{{ species.animal_species }}">{{ species.animal_species }}</md-option>
            </md-select>
        </div>
    </div>
</div>

至于你重复的api调用问题，你可以让数据库返回所有物种并管理js中的'active'，或者使用服务来缓存每个请求，这样至少每只动物都只会查询api一旦。这也使数据逻辑远离控制器，使其可重复使用（以及在多个控制器/指令/服务之间轻松共享数据）。

app.controller('SelectOptGroupController', ['$scope', 'animalService', function($scope, animalService) {
    $scope.model = {
        animals: [],
        species: [],
        selectedAnimal: '',
        selectedSpecies: {}
    };

    animalService.getAnimals().then(function(data){
        $scope.model.animals = data;
    });

    $scope.getSpecies = function(){
        animalService.getSpecies($scope.model.selectedAnimal).then(function(data){
            $scope.model.species = data;
        }); 
    };
}]); //TYPO WAS HERE

app.factory('animalService', ['$http', '$q', function($http, $q){
    var cache = {};

    return {
        getAnimals: function(){
            return $http.get('api2.php').then(function(result) {
                return result.data;
            });
        },
        getSpecies: function(animal){
            if(cache[animal]){
                return $q.when(cache[animal]);
            } else{
                return $http({
                    url: 'whatever.php',
                    method: 'GET',
                    params: {
                        animal: animal
                    }
                }).then(function(result){
                    cache[animal] = result.data;
                    return cache[animal];
                });
            }
        }
    };
}]);

如果你想一次性获得所有物种，只需在前端过滤，你就可以这样做：

app.controller('SelectOptGroupController', ['$scope', 'animalService', function($scope, animalService) {
    $scope.model = {
        animals: [],
        species: [], //this will contain selected animals species
        allSpecies: [], //this will contain all species for all animals
        selectedAnimal: '',
        selectedSpecies: {}
    };

    animalService.getAnimals().then(function(data){
        $scope.model.animals = data;
    });

    animalService.getSpecies().then(function(data){
        $scope.model.allSpecies = data;
    });

    $scope.getSpecies = function(){
        //this filters out the species for the selected animal
        $scope.model.species = $scope.model.allSpecies.filter(function(species){
            return species.animal === $scope.model.selectedAnimal;
        });
    };
}]);

app.factory('animalService', ['$http', '$q', function($http, $q){
    return {
        getAnimals: function(){
            return $http.get('api2.php').then(function(result) {
                return result.data;
            });
        },
        getSpecies: function(animal){
            return $http.get('api3.php').then(function(result){
                return result.data;
            });
        }
    };
}]);

使用JSON动态下拉AngularJS和数据库

1 个答案: