Question

我试图显示从SQL生成的下拉选项，然后将所选值发送回flask。我设法加载了下拉选项，但无法获得所选值。当我尝试将其显示为HTML时，所选的选项为空。

我如何获取所选的选项并显示它？请帮我。谢谢。

烧瓶

@app.route("/Test/")
def getColumns():
        cur = mysql.connection.cursor()
        cur.execute("select column_name from information_schema.columns where table_name ='vosmii_data'")
        rv = cur.fetchall()
        # Converting all data from unicode to ascii
        cleanRV = [[s.encode('ascii') for s in columnList] for columnList in rv]
        # Initialize a dictionary to convert the returned data as lists does not work with flask
        colDict = {}
        for item in cleanRV:
            colDict[item[0]] = item[0]
        #passing result to dataColumns as a json string
        return render_template('test.html', dataColumns=json.dumps(colDict))

HTML

<!DOCTYPE html>
<html ng-app="graphVisualization" lang="en" >
    <head>
         <title>Shipping Data Visualization</title>
         <script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <script src="{{ url_for('static', filename='app.js') }}"></script>
    </head>
    <body ng-init="init('{{ dataColumns }}')" ng-controller="GraphVisualizationController">
        <select ng-model="selectedFilter" >
            <option ng-repeat="filter in dataColumns">{% raw %} {{filter}} {% endraw %}</option>
            </select>
            <div>
            {% raw %}
            <h4> You have selected: {{ selectedFilter}} </h4>
            {% endraw %}
        </div>
        <footer class="footer">
            <p>&copy; Company 2015</p>
        </footer>
    </body>
</html>

AngularJS脚本

(function () {
  'use strict';

  angular.module('graphVisualization', [])

  .controller('GraphVisualizationController', ['$scope', '$log',
    function($scope, $log) {
        $scope.banner = "Flask AngularJS ";

        $scope.selectedFilter = "";
        $scope.dataColumns = null;

        $scope.init = function(html_metadata) {
            console.log(JSON.parse(html_metadata));
            $scope.dataColumns = JSON.parse(html_metadata);
        }
    }
  ]);

}());

Answer 1

您需要为选择中的每个选项提供一个值。您可以通过将ng-repeat选项更改为以下内容来对其进行修复：

<option ng-repeat="filter in dataColumns" ng-value="filter">{% raw %} {{filter}} {% endraw %}</option>

对于我的angularjs项目，我更喜欢使用以下语法进行选择：

<select ng-model="model" ng-options="item.id as item.name for item in items">
    <option value="">Default Option</option>
</select>

显示选定的下拉值

1 个答案: