我正在使用angularjs路线。 在日志页面中插入数据后，我希望它在导航到日志页面时自动更新

Question

After I input data to my log page and navigate/route to the loglist page, it will not update what I recently inserted.I need to refresh manually to update what i recently inserted. I want it to update automatically when I navigate to loglist. How to do that in Angularjs?

Note: I have two route page, log and loglist.

*I used ajax in my forms. I don't want to include other things like css here so that it is easy for you to understand the codes.

html sample

<nav>
            <ul>
                <li><a>Walk-In</a>
                    <ul>
                            <li><a href="#/">Log</a></li>
                            <li><a href="#/loglist">Log List</a></li>
                    </ul>   
                </li>
            </ul>

</nav>

        <div id="content">
            <div id="showcontent" ng-view>
            </div>
        </div>

log.php

<form id="member" method="post" action="../php/connect.php">
                <fieldset style="width:400; border-width:6px;" align="center"   >
            <legend><h3>Member Log</h3><br><br></legend>
                <p id="get_member"></p>

             <input class="fname" type='text' name='firstname' id='firstname' placeholder="First Name" required/>

            </br><input class="lname" type='text' name='lastname' id='lastname' placeholder="Last Name" required /></br>

            </br><label for="male">Male  </label><input type="radio" name="gender" id="male" required value="Male" />
                 <label for="female">Female  </label><input type="radio" name="gender" id="female" value="Female" /><br />
                 <input type="hidden" name="date" id="date" value="">
                 <input type="hidden" name="time" id="time" value="">


            <br><br><input type="submit" name="submit">
        </fieldset>
            </form>

loglist.php

<table id='table12' class='order-table table'>
   <thead id='top'>
            <tr id='tr'>
                <th>ID No.</th>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Gender</th>
                <th>Time</th>
                <th>Date</th>
                <th>Type</th>



            </tr>
     </thead>  
        <tbody>
<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "rmsdb";

    $query=mysql_connect("localhost","root","");
    mysql_select_db("rmsdb",$query);


$query1=mysql_query("select id, firstname, lastname, gender, time, datestamp from walkin");

        while($query2=mysql_fetch_array($query1))
{
echo "<tr> <td>".$query2['id']."</td> 
<td>".$query2['firstname']."</td> 
<td>".$query2['lastname']."</td> 
<td>".$query2['gender']."</td>
<td>".$query2['time']."</td>
<td>".$query2['datestamp']."</td></tr>";
}
    ?>
        </tbody>
    </table>

angular route

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider){

    $routeProvider

    .when('/', {
        templateUrl: 'pages/log.php',
        controller: 'mainController'

    })

    .when('/loglist', {
        templateUrl: 'pages/loglist.php',
        controller: 'secondController',



    })

});

Answer 1

So.. I just now solved the problem. It's stupid because I just used angularjs just for my navigation. I didn't realized that I can use angularjs controller and create a table just like in my loglist.php. I just recently learn angularjs and I only knew the routeProvider just for the sake of my sidebar navigation not to refresh when clicked. nyahaha XD now I think I should learn more about angularjs because it's awesome :D

Here's what I've done. In my angularjs app I create a controller here's the code

app.js

myApp.controller('secondController', ['$scope', '$http', function ($scope, $http) {
            $http.get("../php/loglistajax.php")
                .success(function(data){
                    $scope.data = data;
                })
                .error(function() {
                    $scope.data = "error in fetching data";
                });
        }]);

I also create a file to fetch the data into my database loglistajax.php

<?php
//database settings
$connect = mysqli_connect("localhost", "root", "", "rmsdb");

$result = mysqli_query($connect, "select * from walkin_member");

$data = array();

while ($row = mysqli_fetch_array($result)) {
  $data[] = $row;
}
    print json_encode($data);
?>

and also for my loglist page

<body>
    <br>
    <h1>Log List</h1>
    <input type="text" ng-model="searchFilter">
      <div id='table-wrapper'>
         <div id='table-scroll'>


          <div ng-controller="secondController">

            <table id='table12'>
                <thead id='top'>
                    <tr>
                        <th>ID No.</th>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Gender</th>
                        <th>Time</th>
                        <th>Date</th>
                        <th>Type</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="walkin_member in data | filter:searchFilter">
                        <td>{{walkin_member.id}}</td>
                        <td>{{walkin_member.firstname}}</td>
                        <td>{{walkin_member.lastname}}</td>
                        <td>{{walkin_member.gender}}</td>
                        <td>{{walkin_member.time}}</td>
                        <td>{{walkin_member.datestamp}}</td>
                        <td>{{walkin_member.type}}</td>
                    </tr>
                </tbody>
            </table>
          </div>
        </div>
      </div>

      <script src="../js/angular.min.js"></script>
      <script src="../js/app.js"></script>
    </body>