Ajax 在模板中构建AngularJS HTTP请求

我是AngularJS的新手，从老板那里得到了一个WebApp模板。 我必须建立一个CRM，模板中充满了AngularJS。 这是一个非常好的框架，但我有我的问题

我有一个控制器来处理这些物品：

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

    function ($scope, $http, $filter) {
        var init;
        $http.get('http://srv.ct-server.de/ctcrm/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));

如果没有过滤器，它可以工作。。。 但是当我把最后一个放进去的时候

, $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)
        })()

错误来了

TypeError:无法读取未定义的属性“slice”

阵列仍在控制台中。 我不理解这个错误

这是我的html：

    <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="&lsaquo;" next-text="&rsaquo;"
                            boundary-links="true"></pagination>
            </div>
        </div>
    </footer>
</section>

Artikel
身份证件
Artikelgruppe
艺名
普赖斯
艾吉斯·阿蒂克努默
可视性
{{article.idArticles}}
{{article.artGroupName}}
{{article.artName}}
{{article.artPrice}}
{{article.egisArtId}}
{{article.active}}
泽格
埃因特拉格市

---

请帮助我

您需要使用Angular提供的

$http

服务，并使用以下内容设置

$scope

变量：

$http({method: 'GET', url: '/db/articles.php' }).
    success(function(data, status, headers, config) {
        $scope.articles = data;
    }).
    error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

确保将

$http

服务注入控制器，如下所示：

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

---

在模板文件中，可以使用

{{articles}

或

ng repeat

循环所有文章。控制器通过

ng controller=“MyController”

连接到模板中的零件

---

这都是非常基本的，角度是如何工作的。我建议看一些教程。。。例如，这个：

请检查我的问题