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

Question

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

我有一个下拉列表，其中包含来自数据库的 table 名称列表。当从下拉列表中选择 table 名称时，我想对 Web API 方法进行 HTTP GET 调用，其中 returns 所选 table 中的列名称列表.

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

无需多个控制器，您需要绑定到 ngChange。观察以下示例，具体来说，绑定到 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;
        });
    }
}

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

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

Answer 2

您不应为此目的使用两个控制器，而是可以使用服务或工厂进行 $https 请求以从服务器获取数据。

您还应该使用 ng-change 来调用 table 列名信息调用

试试这个

在app.js

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

app.factory('userFactory', ['$http', function($http) {
  var dataFactory = {};


  dataFactory.getTableNames = function() {
    /*$http.get('http://localhost:61475/api/SxTableInfo/').
           success(function (data, status, headers, config) {
               $scope.tables = data;
           }).
           error(function (data, status, headers, config) {
               alert("error!");
           });*/
    data = [{
      id: 1,
      tableName: 'table1'
    }, {
      id: 2,
      tableName: 'table2'
    }, {
      id: 3,
      tableName: 'table3'
    }];
    return data;
  }
  dataFactory.getColumnNames = function() {
    alert('implement your logic here . ');
    /*  $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!");
            });*/
  }
  return dataFactory;
}]);
app.controller('MainCtrl', ['$scope', 'userFactory', function($scope, userFactory) {
  $scope.name = 'World';


  $scope.items = userFactory.getTableNames();
  $scope.getColumnNames= function(){
    userFactory.getColumnNames();

  }

}]);

在HTML,

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
       <select ng-change="getColumnNames()" ng-model="selectedItem" ng-options="item.tableName as item.tableName for item in items"></select>

  </body>

</html>

Plunker link 同样。

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

Populate table data with $http.get on dropdown option selected in Angular

html

javascript

angularjs

angularjs-directive

angularjs-service