[FRAGE] AngularJS http-request

bambamboole · 18. Sep. 2014

Hallo JSWelt-Community,

Ich versuche krampfhaft HTTP-requests mit AngularJS zu realisieren komme aber leider nicht weiter.

Mein aktueler Code:

Code:

(function () {
    "use strict";
    angular.module("app.tables", []).controller("articlesCtrl", ["$scope", "$http",

        function ($scope, $http) {

            $http.get('/www/articles.php?method=fetchAll').success(function (data, status, headers, config) {
                $scope.articles = data;
            }).
                error(function (data, status, headers, config) {
                    // log error
                });
        }
    ])
}.call(this));

Ich arbeite mit einem Template, wo vorher dei Daten direkt aus einem Array kamen, was jetzt halt auf HTTP-Requests umgestellt werden soll.

Der funktionierende Code war:

Code:

(function() {
    "use strict";
    angular.module("app.tables", []).controller("articlesCtrl", ["$scope", "$filter",
        function($scope, $filter) {
            var init;
            return $scope.articles = [
                {
                    "idArticles": 1,
                    "egisArtId": "",
                    "artName": "CT-Tower black",
                    "artPrice": "60.00",
                    "artGroupName": "Gehäuse",
                    "active": "1"
                }
            ], $scope.searchKeywords = "", $scope.filteredArticles = [], $scope.row = "", $scope.select = function(page) {
                var end, start;
                return start = (page - 1) * $scope.numPerPage, end = start + $scope.numPerPage, $scope.currentPageArticles = $scope.filteredArticles.slice(start, end)
            }, $scope.onFilterChange = function() {
                return $scope.select(1), $scope.currentPage = 1, $scope.row = ""
            }, $scope.onNumPerPageChange = function() {
                return $scope.select(1), $scope.currentPage = 1
            }, $scope.onOrderChange = function() {
                return $scope.select(1), $scope.currentPage = 1
            }, $scope.search = function() {
                return $scope.filteredArticles = $filter("filter")($scope.articles, $scope.searchKeywords), $scope.onFilterChange()
            }, $scope.order = function(rowName) {
                return $scope.row !== rowName ? ($scope.row = rowName, $scope.filteredArticles = $filter("orderBy")($scope.articles, rowName), $scope.onOrderChange()) : void 0
            }, $scope.numPerPageOpt = [3, 5, 10, 20], $scope.numPerPage = $scope.numPerPageOpt[2], $scope.currentPage = 1, $scope.currentPageArticles = [], (init = function() {
                return $scope.search(), $scope.select($scope.currentPage)
            })()
        }
    ])
}.call(this))

Habe zur Übersichtlichkeit die Filtermöglichkeiten entfernt.

Das Schlimme ist, es kommt nciht mal eine Fehlermeldung, sondern einfach keine Daten in meine Artikeltabelle!

Bitte helft mir...

Cheers
bambamboole

- - - Aktualisiert - - -

Update !

Es kommt etwas aus der Datenbank.
Ich habe unter $scope.articles = data;
ein console.log($scope.articles) gemacht und da sind alle drin. Aber leider werden Sie nicht in die Tabelle geschrieben...

- - - Aktualisiert - - -

Also

Code:

(function () {
    "use strict";
    angular.module("app.tables", []).controller("articlesCtrl", ["$scope", "$http", "$filter",

        function ($scope, $http, $filter) {
           var init;
            $http.get('/www/articles.php?method=fetchAll').success(function (data) {
                $scope.articles = data;
                console.log($scope.articles);
            }).
                error(function (data) {
                    // log error
                })
                , $scope.searchKeywords = "", $scope.filteredArticles = [], $scope.row = "", $scope.select = function (page) {
                var end, start;
                return start = (page - 1) * $scope.numPerPage, end = start + $scope.numPerPage, $scope.currentPageArticles = $scope.filteredArticles.slice(start, end)
            }, $scope.onFilterChange = function () {
                return $scope.select(1), $scope.currentPage = 1, $scope.row = ""
            }, $scope.onNumPerPageChange = function () {
                return $scope.select(1), $scope.currentPage = 1
            }, $scope.onOrderChange = function () {
                return $scope.select(1), $scope.currentPage = 1
            }, $scope.search = function () {
                return $scope.filteredArticles = $filter("filter")($scope.articles, $scope.searchKeywords), $scope.onFilterChange()
            }, $scope.order = function (rowName) {
                return $scope.row !== rowName ? ($scope.row = rowName, $scope.filteredArticles = $filter("orderBy")($scope.articles, rowName), $scope.onOrderChange()) : void 0
            }, $scope.numPerPageOpt = [3, 5, 10, 20], $scope.numPerPage = $scope.numPerPageOpt[2], $scope.currentPage = 1, $scope.currentPageArticles = [], (init = function () {
                return $scope.search(), $scope.select($scope.currentPage)
            })()

        }
    ])
}.call(this));

hier funktioniert es erst ab der letzten Funktion nicht mehr... Die wird aber zum filtern benötigt.

Code:

, $scope.numPerPageOpt = [3, 5, 10, 20], $scope.numPerPage = $scope.numPerPageOpt[2], $scope.currentPage = 1, $scope.currentPageArticles = [], (init = function () {
                return $scope.search(), $scope.select($scope.currentPage)
            })()

Mein HTML schaut so aus:

Code:

    <section class="panel panel-default table-dynamic">
        <div class="panel-heading"><strong>Artikel</strong></div>

        <div class="table-filters">
            <div class="row">
                <div class="col-sm-4 col-xs-6">
                    <form>
                        <input type="text"
                               placeholder="Search..."
                               class="form-control"
                               data-ng-model="searchKeywords"
                               data-ng-keyup="search()">
                    </form>
                </div>
            </div>
        </div>

        <table class="table table-bordered table-striped table-responsive">
            <thead>
                <tr>
                    <th><div class="th">
                        ID
                        <span class="fa fa-angle-up"
                              data-ng-click=" order('idArticles') "
                              data-ng-class="{active: row == 'idArticles'}"></span>
                        <span class="fa fa-angle-down"
                              data-ng-click=" order('-idArticles') "
                              data-ng-class="{active: row == '-idArticles'}"></span>
                    </div></th>
                    <th><div class="th">
                        Artikelgruppe
                        <span class="fa fa-angle-up"
                              data-ng-click=" order('artGroupName') "
                              data-ng-class="{active: row == 'artGroupName'}"></span>
                        <span class="fa fa-angle-down"
                              data-ng-click=" order('-artGroupName') "
                              data-ng-class="{active: row == '-artGroupName'}"></span>
                    </div></th>
                    <th><div class="th">
                        Artikelname
                        <span class="fa fa-angle-up"
                              data-ng-click=" order('artName') "
                              data-ng-class="{active: row == 'artName'}"></span>
                        <span class="fa fa-angle-down"
                              data-ng-click=" order('-artName') "
                              data-ng-class="{active: row == '-artName'}"></span>
                    </div></th>
                    <th><div class="th">
                        Preis
                        <span class="fa fa-angle-up"
                              data-ng-click=" order('artPrice') "
                              data-ng-class="{active: row == 'artPrice'}"></span>
                        <span class="fa fa-angle-down"
                              data-ng-click=" order('-artPrice') "
                              data-ng-class="{active: row == '-artPrice'}"></span>
                    </div></th>
                    <th><div class="th">
                        EGIS-Artikelnummer
                        <span class="fa fa-angle-up"
                              data-ng-click=" order('egisArtId') "
                              data-ng-class="{active: row == 'egisArtId'}"></span>
                        <span class="fa fa-angle-down"
                              data-ng-click=" order('-egisArtId') "
                              data-ng-class="{active: row == '-egisArtId'}"></span>
                    </div></th>
                    <th><div class="th">
                        Sichtbarkeit
                    </div></th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="article in currentPageArticles">
                    <td>{{article.idArticles}}</td>
                    <td>{{article.artGroupName}}</td>
                    <td>{{article.artName}}</td>
                    <td>{{article.artPrice}}€</td>
                    <td>{{article.egisArtId}}</td>
                    <td class="articles_active text-center">{{article.active}}</td>
                </tr>
            </tbody>
        </table>

        <footer class="table-footer">
            <div class="row">
                <div class="col-md-6 page-num-info">
                    <span>
                        Zeige
                        <select data-ng-model="numPerPage"
                                data-ng-options="num for num in numPerPageOpt"
                                data-ng-change="onNumPerPageChange()">
                        </select>
                        Einträge pro Seite
                    </span>
                </div>
                <div class="col-md-6 text-right pagination-container">
                    <pagination class="pagination-sm"
                                ng-model="currentPage"
                                total-items="filteredArticles.length"
                                max-size="4"
                                ng-change="select(currentPage)"
                                items-per-page="numPerPage"
                                rotate="false"
                                previous-text="‹" next-text="›"
                                boundary-links="true"></pagination>
                </div>
            </div>
        </footer>
    </section>

Fehlermeldung : TypeError: Cannot read property 'slice' of undefined
Weiß irgendwer vll was ?

kkapsner · 18. Sep. 2014

In welcher Zeile kommt diese Fehlermeldung?

mikdoe · 19. Sep. 2014

slice wird scheinbar nur in einer Zeile an einer Stelle verwendet aber ich hab eine andere Frage. Ist das PHP Code oder arbeitest du tatsächlich in JS mit Präfix $ für Variablennamen?

tsseh · 19. Sep. 2014

kannst du mir mal sagen, warum du hier extensiv den kommaoperator nutzt? übersichtlich finde ich das nicht gerade.

an der stelle, wo du $scope.select aufrufst, ist $scope.filteredArticles noch nicht gesetzt. warum auch immer, selbst wenn es erkennbar sein sollte weil du den ganzen relevanten code angegeben hast, kann ich es nicht erkennen, weil ich mich nicht durch alle kommaoperatoren durcharbeiten werde.
vermutlich, weil du nicht beachtet hast, dass der requests asynchron erfolgt, da es ja ohne request funktioniert und ich nicht sehe, dass in deinem callback etwas mit den daten geschieht.

[FRAGE] AngularJS http-request

bambamboole

New member

kkapsner

Super Moderator

mikdoe

Active member

tsseh

Lounge-Member