【问题标题】:angular JS refresh a http角度JS刷新一个http
【发布时间】:2013-09-01 05:41:52
【问题描述】:

我正在尝试与联系人制定议程,而我刚刚开始学习 AngularJS。到目前为止,我做了一个生成 JSON 的 php,将其加载到角度控制器上,然后在 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>

到目前为止一切顺利,但现在我正在尝试按刷新时刷新列表的内容,但我不知道该怎么做。如果我在这段代码中也做错了什么,请告诉我。

提前谢谢你,丹尼尔!

【问题讨论】:

    标签: php javascript html angularjs


    【解决方案1】:

    您已经完成了一半以上!这里有一些细微的调整,你应该做的伎俩。将您的 $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>
    

    【讨论】:

    • 哇,这既简单又令人惊叹。非常感谢,詹德森!
    猜你喜欢
    • 2017-06-30
    • 1970-01-01
    • 2014-01-03
    • 1970-01-01
    • 1970-01-01
    • 2020-12-10
    • 1970-01-01
    • 2020-02-17
    • 1970-01-01
    相关资源
    最近更新 更多