Question

我正在尝试使用python Flask和angular JS编写应用程序。

在我的index.html中，我有以下代码

<div ng=controller="QueryController as queryController">
<form>
<input type="text" ng-model="queryController.queryCode"/>
<input type="submit" value="Query"/>
</form>

<table>
<tr ng-repeat="row in queryController.results">
    <td>{{ row.id }}</td>
    <td>{{ row.name }}</td>
</tr>
</table>
</div>

当加载index.html时，表格将为空，在人们在文本字段中输入查询文本后，我想重新加载表格以显示查询结果。查询结果来自http请求。

获取查询结果后，如何让javascript重新加载表单。

Answer 1

在表单上使用 ng-submit 指令，并使其触发一个简单的函数：

在queryController.queryCode
检索结果并将其存储在queryController.results

您在html中对该结果变量和表格内容进行的绑定足以让您的页面在queryController.results更改后立即更新，而无需您执行任何其他操作。

以下是 html 代码的示例：

<div ng=controller="QueryController as queryController">
    <form ng-submit="queryController.executeQuery()">   <!-- used ngSubmit here -->
        <input type="text" ng-model="queryController.queryCode"/>
        <input type="submit" value="Query"/>
    </form>

    <table>
        <tr ng-repeat="row in queryController.results">
            <td>{{ row.id }}</td>
            <td>{{ row.name }}</td>
        </tr>
    </table>
</div>

...以及控制器中的其他代码：

...
queryController.executeQuery = function() {
    // pseudo-code that executes your query and gives you back a promise
    var promise = database.query(queryController.queryCode);
    promise.then(function (resultSet) {
        queryController.results = resultSet;
    });
};
...

<强> 编辑：

由于您提到您通过 http 请求执行查询，here is a link to the AngularJS way这样做。

<强> TL; DR：

假设您使用 http POST 方法执行查询：

$http.post(/*your database server URL*/, JSON.stringify(queryController.queryCode)) .success(function(data) { // this callback will be called asynchronously when the response is available queryController.results = JSON.parse(data); });

请注意，您还需要序列化/反序列化您的数据，以通过 http 进行传输。我在我的示例中这样做了，使用JSON格式进行解析和写入的简单方法。

Answer 2

表单是否以ng-submit提交，例如：

<form ng-submit="queryController.submit()">

在你的控制器中：

queryController.submit = function() {
    $http
       .post(...) // the form submit action
       .then(function() { // form submitted successfully, update your table
           $http
              .get(...)
              .then(function(result) {
                 queryController.results = result;
              });
       });
}

如何在按下提交按钮后使用角度js刷新表格

2 个答案: