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

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。同一动物有多个物种，例如，有三个动物名称为 bear 的插入物，但每个 animal_species 都是不同的 grizzly、black 和 polar。感谢您的帮助!

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 中的“事件”物种，或者使用服务来缓存每个请求，以便至少每个动物只会查询 api一次。这也将数据逻辑保留在 Controller 之外，使其可重用(以及易于在多个 Controller /指令/服务之间共享数据)。

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