显示选定的下拉值[重复]答案

【问题标题】：Displaying selected dropdown value [duplicate]显示选定的下拉值[重复]
【发布时间】：2018-06-26 20:32:15
【问题描述】：

我正在尝试显示从 SQL 生成的下拉选项并将所选值发送回烧瓶。我设法加载下拉选项，但我无法获得选定的值。当我尝试在 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);
        }
    }
  ]);

}());

【问题讨论】：

标签： angularjs flask

【解决方案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>

【讨论】：