1

私は連絡先で議題を作成しようとしていますが、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>

これまでのところは問題ありませんが、[更新] を押したときにリストの内容を更新しようとしていますが、その方法がわかりません。このコードで何か間違ったことをした場合は、お知らせください。

よろしくお願いします、ダニエル！

4

1 に答える 1

3

半分以上進んでいます！これは、トリックを行う必要があるものにいくつかの微調整を加えたものです。$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>
于 2013-08-28T23:33:40.757 に答える