angular JS刷新了一个http

angular JS refresh a http

本文关键字：一个 http JS 刷新 angular      更新时间：2023-09-26

我正在尝试与联系人制定议程，我刚刚开始学习AngularJS。到目前为止，我做了一个php，它为我生成了一个JSON，将其加载到angular控制器上，然后在html上显示。

这是角度代码

var Agenda = angular.module('Agenda', []);
Agenda.controller('Contacts', function($scope, $http) {
    $http.get('php/contacts.php').success(function(data) {
        $scope.jsonContacts = data;
    });
});

这是HTML

<section class="agenda" ng-app="Agenda">
        <ul ng-controller="Contacts">
            <li ng-repeat="contact in jsonContacts">
                <div class="col1">{{contact.contact_id}}</div>
                <div class="col2">{{contact.contact_firstname + ' ' + contact.contact_lastname}}</div>
                <div class="col3">{{contact.contact_phone}}</div>
                <div class="col4">{{contact.contact_email}}</div>
            </li>
        </ul>
        <a>Refresh</a>
    </section>

到目前为止还不错，但现在我正在尝试刷新列表的内容，当我按下刷新时，我不知道如何做到这一点。如果我在这个代码中也做错了什么，请告诉我。

提前谢谢你，丹尼尔！

您已经完成了一半以上！这里有一些小的调整，你有什么应该做的技巧。将您的$http调用转换为我们可以重复调用的函数-refresh():

Agenda.controller('Contacts', function($scope, $http) {
    $scope.refresh = function() {
        $http.get('php/contacts.php').success(function(data) {
            $scope.jsonContacts = data;
        });
    }
    // call it initially
    $scope.refresh();
});

然后简单地使用ng-click来调用我们在上面添加的新refresh()函数：

<section class="agenda" ng-app="Agenda">
        <ul ng-controller="Contacts">
            <li ng-repeat="contact in jsonContacts">
                <div class="col1">{{contact.contact_id}}</div>
                <div class="col2">{{contact.contact_firstname + ' ' + contact.contact_lastname}}</div>
                <div class="col3">{{contact.contact_phone}}</div>
                <div class="col4">{{contact.contact_email}}</div>
            </li>
        </ul>
        <a ng-click="refresh()">Refresh</a>
    </section>
相关文章：