使用角度js将来自servlet的数据显示到<select>标签中答案

【问题标题】：displaying data from servlet into <select> tag using angular js使用角度js将来自servlet的数据显示到<select>标签中
【发布时间】：2016-02-10 06:49:54
【问题描述】：

我正在尝试在 select 标记中显示数据，其中数据来自数据库。我正在使用 servlet 从数据库中获取数据。但我不知道如何从 angularjs 调用 servlet 并在 select 标记中显示该数据。

我在这里分享我的代码，请帮助我。

servlet1.java 代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    PrintWriter out = response.getWriter();
    Connection con = null;
    try {
        Class.forName("com.mysql.jdbc.Driver");

        con = DriverManager.getConnection("jdbc:mysql://localhost:3306/apm", "root", "root12345");
        Statement st = con.createStatement();
        ResultSet rs;

        rs = st.executeQuery("select machine_name from machines");

        int i = 1;
        String res = "[",separator = "";

        while (rs.next()) {

                res += separator + rs.getString(1) ;
                separator = ",";
            }

         res += "]" ;
         out.println(res);
    }}

servlet2.java 代码：

try{
     Class.forName("com.mysql.jdbc.Driver");
     con = DriverManager.getConnection("jdbc:mysql://localhost:3306/apm",   "root", "root12345");
        Statement st = con.createStatement();
        ResultSet rs;
        String start = request.getParameter("start");
        String index = request.getParameter("index"); 
        String tablename = request.getParameter("tablename");
        if (start == null) {
            start = "0";
        }
        if (index == null) {
            index = "1";
        }

        if (tablename == null) {
            tablename = "data";
        }

        String column = "";
        boolean first = true;

        rs = st.executeQuery("show columns from" + tablename );

        int i = 1;
        String res = "[",separator = "";
        while (rs.next()) {

            res += separator + rs.getString(1) ;
            separator = ",";
        }
        res += "]" ;
     out.println(res);
      }

角度 js 代码：

myApp.controller('MyCtrl', ['$scope', function ($scope) {
        $scope.blocs = [];
        $scope.fields = [];
        $scope.addNewField = function (index) {
            alert(index);
            $scope.blocs[index].fields.push({
                sensor : "",
                sensor1 : "",
                sensor2 : ""
            });
        };
        $scope.addBloc = function () {
            $scope.blocs.push({
                fields : []
            });
        };
    }
]);

jsp代码：

<div ng-controller="MyCtrl">
    <button ng-click="addBloc()">
    Add Machines
    </button>
    <div ng-repeat="bloc in blocs">
        <div>
            <select>
                <option>---select machine--</option>
            </select>
            <button ng-click="addNewField($index)">
                Add sensors
            </button>
        </div>
        <div ng-repeat="field in bloc.fields">
            <select ng-model="field.sensor">
                <option value="sensor1">sensor1</option>
                <option value="sensor2">sensor2</option>
            </select>
            <input type="text" ng-model="field.sensor1">
            <input type="text" ng-model="field.sensor2"> {{field.sensor}}   {{field.sensor1}} {{field.sensor2}}
        </div>
    </div>
</div>

在第一个选择标记中，我需要从第一个 servlet 代码（即 servlet1.java）中获取数据。
在第二个选择标签中，我需要从第二个 servlet 代码（即 servlet2.java）中获取数据。

请任何人帮助我... :(

【问题讨论】：

标签： angularjs jsp servlets

【解决方案1】：

您可以使用$http service，例如：

var servlet_url = "...";
$http.get(servlet_url)
.then(function(response) {
    $scope.myList = response.data;
    $scope.data = { selected: $scope.myList[0] };
});

然后将<select>绑定到使用ngOptions directive从servlet检索到的数据：

<select ng-model='data.selected' ng-options='item in myList'></select>

【讨论】：