0

I am trying to write a app using python Flask and angular JS.

In my index.html, I have following code

<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>

When index.html is loaded, the table will be empty, after people inputed query text in text field, I want to reload table to show query result. The query result is from an http request.

How should I let javascript to reload the form after getting query result.

1
  • Do you want to send the data to a backend service and get the result of the action or get the data that you sent to the service and put in the table? Commented Jun 26, 2015 at 16:20

2 Answers 2

2

Use the ng-submit directive on your form and make it trigger a function that simply:

  1. executes the query in queryController.queryCode
  2. retrieves the result and stores it in queryController.results

The binding you've done in your html between that result variable and your table content is sufficient for your page to be updated as soon as queryController.results changes, without you doing anything else.


Here's an example of what your html code could look like:

<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>

... and the additional code in your controller:

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

EDIT:

Since you mentioned that you execute your query via an http request, here is a link to the AngularJS way to do so.

TL;DR:

Assuming you're using the http POST method to execute your query:

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

Please note that you'll also need to serialise/deserialise your data to transfer it through http. I did so in my example, featuring a simple way to parse and write using the JSON format.

Sign up to request clarification or add additional context in comments.

2 Comments

In your starting code <div ng=controller="QueryController as queryController">. Are you sure? It's not ng-controller instead your have written ng=controller? Is it a mistake or this type of method is available in angularjs?
Oops, it's indeed just a typo :)
0

Do the form submit in an ng-submit, like:

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

And in your controller:

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.