템플리트에서 AngularJS HTTP 요청을 작성하십시오.

Question

저는 AngularJS에 정말 익숙하며 상사로부터 WebApp-Template을 받았습니다. 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: Cannot read property 'slice' of undefined

어레이는 여전히 콘솔에 있습니다. 이 오류를 이해할 수 없습니다.

이

내 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> 

나에게 제발 도와주세요

Answer 1

당신은 각도에 의해 제공되는 $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) { 

Answer 2

템플릿 파일에서 모든 기사를 반복하려면 {{ articles }} 또는 ng-repeat을 사용할 수 있습니다. 컨트롤러는 ng-controller="MyController"으로 템플릿의 파트에 연결됩니다.

아주 기본적인 것이고 각진 작용 방식입니다. 몇 가지 자습서를 보는 것이 좋습니다 ... 예를 들어,이 하나 : http://www.ng-newsletter.com/posts/beginner2expert-scopes.html