Как обновить данные в таблице после запроса $http.post в AngularJS?

Question

[Иван Григоренко]

Задача: после нажатия на кнопку в таблицу добавляется элемент. Новый добавленный элемент отображается только после обновления страницы. Нужно чтоб с добавлением по клику на кнопку таблица обновлялась и не нужно было бы перезагружать страницу лишний раз.

app.controller('addUrlCtrl', function($scope, $http){
    $scope.insertUrl = function(){
        $http.post('../addlink.php',{'linkname': $scope.linkname, 'url': $scope.url})
            .success(function(data, status, headers, config){
            alert("Ссылка добавлена!");
        });
    }
});

app.controller('getUrlCtrl', function($scope, $http){
            $http.get('../getlink.php').then(function(response){
            $scope.urlData = response.data.records; 
        });
});

Код getlink.php :

<?php
    session_start();
    header("Access-Control-Allow-Origin: *");
    header("Content-Type: application/json; charset=UTF-8");
    
    $conn = new mysqli("localhost", "mysql", "mysql", "developer-note");

    $result = $conn->query("SELECT linkname, url FROM linkbase WHERE username = '".$_SESSION['username']."'");

    $outp = "";
    while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
        if ($outp != "") {$outp .= ",";}
        $outp .= '{"linkname":"'  . $rs["linkname"] . '",';
        $outp .= '"url":"'. $rs["url"]     . '"}'; 
    }
    $outp ='{"records":['.$outp.']}';
    $conn->close();

    echo($outp);
?>

Код addlink.php :

<?php
    require_once("connection.php");
    
    $data = json_decode(file_get_contents("php://input"));
    
    $linkname = mysql_real_escape_string($data->linkname);
    $url = mysql_real_escape_string($data->url);
    $urlquery = mysql_query("INSERT INTO linkbase (username, linkname, url) VALUES('".$_SESSION['username']."','$linkname', '$url')");
?>

html-код отображения таблицы:

<form ng-controller="addUrlCtrl" name="urlForm">
      <h2>Добавить ссылку</h2>
       <input type="text" name="linkname" placeholder="Наименование ссылки" ng-model="linkname">
       <input type="url"name="url" placeholder="URL ссылки" ng-model="url">
       <button ng-click="insertUrl()">Отправить</button>
</form>
<div ng-controller="getUrlCtrl">
          <table>
               <th>Имя ссылки</th>
               <th>URL ссылки</th>
               <tr ng-repeat="x in urlData | filter: search">
                       <td>{{ x.linkname }}</td>
                       <td><a href="{{x.url}}">{{ x.url }}</a></td>
               </tr>
        </table>
</div>

Answer 1

[bromzh]

0) Сперва почитай это
1) Зачем 2 контроллера? Достаточно 1 контроллера с 2-мя методами в нём.
2) $scope - зло. Используй синтаксис controllerAs
3) После добавления элемента нужно либо возвращать с бэкенда новый список (что не по REST), либо делай запрос (естественно в цепочке промисов). Ведь если данные обновятся с 2-х источников, будет рассинхрон.
4) Не используй $http().success, всегда используй then.
5) <a href="{{x.url}}"> не сработает. Нужна директива ng-href.

Ну а код будет примерно такой:

function myService($http, $log) {
    return {
        addLink: addLink,
        getLinks: getLinks
    };
    
    function addLink(data) {
        $http.post('/api/links', data)
        .then(function (response) {
            $log.log('Success', response);
        });
    }

    function getLinks() {
        $http.get('/api/links')
        .then(function (response) {
            return response.data.records;
        });
    }
}

function MainController(myService) {
    var vm = this;

    vm.addLink = addLink;

    function fetch() {
        return myService.getLinks()
        .then(function (links) {
            vm.links = links;
        });
    }

    function addLink() {
        return myService.addLink({
            'linkname': vm.linkname, 
            'url': vm.url
        })
        .then(function () {
            vm.linkname = '';
            vm.url = '';
            return fetch();
        });
    }
}

angular.module('app', [])
    .factory('myService', myService)
    .controller('MainController, MainController');

<div ng-controller="MainController as main">
    <form ng-submit="main.addLink()">
        Name: <input type="text" ng-model="main.linkname"><br>
        URL: <input type="text" ng-model="main.url">
    </form>
    <hr>
    <ul>
        <li ng-repeat="item in main.links">
            <a ng-href="{{ item.url }}">{{ item.linkname }}</a>
        </li>
    </ul>
</div>

Comments

[Иван Григоренко]

Спасибо за подробный ответ. По сути я пытаюсь сделать CRUD таблицу на Англулар, которая взаимодействует с PHP / MySQL. Может подскажете что посмотреть / почитать по этой теме? Потому что сейчас только реализован механизм добавления в таблицу, о удалении элементов и их редактировании пока речи не идет, т.к. мало опыта.

Answer 2

[lega]

При успешной отправке данных, добавить их в urlData, либо полностью перезагрузить urlData.