javascript - 使用 $http.get 在 Angular 中选择的下拉选项填充表数据

Question

我是 Angular 的新手，想了解如何完成以下任务:

我有一个下拉列表，其中包含来自数据库的表名列表。从下拉列表中选择表名后，我想对 Web API 方法进行 HTTP GET 调用，该方法返回所选表中的列名列表。

HTML:

<div class="row">
    <div ng-app="myApp">
        <div class="col-lg-12">
            <h1>Table Information</h1>
            <hr />
            <div ng-controller="TableController" class="col-lg-6">
                <label>Select a Table:</label>
                <select id="tablename" ng-options="table.Name for table in tables track by table.Name" ng-model="data.selectedOption" class="form-control"></select>
            </div>
        </div>
        <div class="col-lg-12">
            <h1>{{data.selectedOption}}</h1>
            <hr />
            <div ng-controller="TableColumnController" class="col-lg-6">
                <table class="table">
                    <thead>
                    <tr>
                        <th>Column Name</th>
                        <th>Type</th>
                        <th>Max Characters</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="tablecolumn in tablecolumns">
                        <td>
                            {{tablecolumn.Name}}
                        </td>
                        <td>
                            {{tablecolumn.Type}}
                        </td>
                        <td>
                            {{tablecolumn.MaxCharacters}}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

这是我的 JavaScript:

var app = angular.module('myApp', []);

app.controller('TableColumnController', function ($scope, $http) {
    $http.get('http://localhost:61475/api/SxTableInfo/',
    {
        params: {
            tablename: "smsn"
        }
    }).
    success(function (data, status, headers, config) {
        $scope.tablecolumns = data;
    }).
    error(function (data, status, headers, config) {
        alert("error!");
    });
});

app.controller('TableController', function ($scope, $http) {
    $http.get('http://localhost:61475/api/SxTableInfo/').
        success(function (data, status, headers, config) {
            $scope.tables = data;
        }).
        error(function (data, status, headers, config) {
            alert("error!");
        });
});

执行此操作的最佳方法是什么？

这里只是一个例子:

更新代码:

          <div class="row" ng-app="myApp">
    <div ng-controller="ctrl">
        <div class="col-lg-12">
            <h1>Table Information</h1>
            <hr />
            <div class="col-lg-6">
                <label>Select a Table:</label>
                <select id="tablename"
                        ng-options="table.Name for table in tables track by table.Name"
                        ng-model="data.selectedOption"
                        ng-change="getColumns(data.selectedOption)"
                        class="form-control"></select>

            </div>
        </div>
        <div class="col-lg-12">
            <h1>{{data.selectedOption.Name}}</h1>
            <hr />
            <div class="col-lg-6">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Column Name</th>
                            <th>Type</th>
                            <th>Max Characters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="tablecolumn in tablecolumns">
                            <td>
                                {{tablecolumn.Name}}
                            </td>
                            <td>
                                {{tablecolumn.Type}}
                            </td>
                            <td>
                                {{tablecolumn.MaxCharacters}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        var app = angular.module('myApp', []);

        app.factory('tableService', ['$http', function ($http) {

                function getColumns(selection) {
                    $http.get('http://localhost:61475/api/SxTableInfo/', { params: { tablename: selection } }).success(function (data) {
                        return data;
                    });
                }

                function getTables() {
                    $http.get('http://localhost:61475/api/SxTableInfo/').success(function (data) {
                        return data;
                    });
                }

                return { getColumns: getColumns, getTables: getTables }
            }]);

        app.controller('ctrl', ['$http', '$scope', 'tableService', function ($http, $scope, tableService) {

            $scope.tables = tableService.getTables();

            $scope.getColumns = function (selection) {
                $scope.tablecolumns = tableService.getColumns(selection.Name);
            }

        }]);

    </script>
}

Answer 1

无需多个 Controller ，您需要绑定(bind)到 ngChange .观察以下示例，具体来说，绑定(bind)到 getStuff...

<select 
    id="tablename" 
    ng-options="table.Name for table in tables track by table.Name" 
    ng-model="data.selectedOption" 
    ng-change="getStuff(data.selectedOption)"
    class="form-control">
</select>

---

app.controller('ctrl', function ($scope, $http) {
    $scope.getStuff = function(selection) {
        $http.get('http://localhost:61475/api/SxTableInfo/', { 
            params: { tablename: selection }
        })
        .success(function (data, status, headers, config) {
            $scope.tablecolumns = data;
        });
    }
}

我建议将此逻辑移至可注入(inject)服务中，很可能是您的下一步。像...

app.factory('TableService', ['$http', function($http) {
    function getMetaData(selection) {
        $http.get('http://localhost:61475/api/SxTableInfo/', { params: { tablename: selection } }
    }

    return { getMetaData: getMetaData }
}]);

---

app.controller('ctrl', ['$scope', 'TableService', function ($scope, TableService) {
    $scope.getStuff = function(selection) {
        TableService.getMetaData(selection).then(function(response) {
            $scope.tablecolumns = response.data;
        });
    }
}]);

Plunker Link - 简化演示

---

根据您的示例和更新的代码进行编辑，试一试...

app.controller('ctrl',...

    tableService.getTables().then(function(response) {
        $scope.tables = response.data;
    });

    $scope.getColumns = function (selection) {
       tableService.getColumns(selection.Name).then(function(response) {
            $scope.tablecolumns = response.data
        });
    }