如何在点击提交按钮后使用angular js刷新表格

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指令，并使其触发一个简单的函数：

1. 在queryController.queryCode中执行查询
2. 检索结果并将其存储在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请求执行查询，因此这里有一个AngularJS方法的链接。

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