Как использовать угловой JS, чтобы обновить таблицу после нажатия кнопки отправки

0

Я пытаюсь написать приложение, используя python Flask и угловой 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 перезагрузить форму после получения результата запроса.

Теги:

2 ответа

2

Используйте директиву 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.

  • 0
    В вашем начальном коде <div ng=controller="QueryController as queryController"> . Ты уверен? Это не ng-controller а вы написали ng=controller ? Это ошибка или этот метод доступен в angularjs?
  • 0
    Ой, это действительно просто опечатка :)
0

Отправьте форму в 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;
              });
       });
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню