AngularJS Pas de sortie Pas d'erreur

Question

Après plusieurs heures, je pensais que mon code était en cours d'exécution, mais je n'obtiens aucune sortie dans mon tableau ... Impossible de trouver l'erreur ... le console.log($scope.articles) a la gamme complète d'articles.

codeJS:

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

    function ($scope, $http, $filter) { 
     var init; 
     $http.get('SOMEURL').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) { 
      if (!$scope.currentPageArticles || !$scope.currentPageArticles.length) { return; } 
      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)); 

HTML-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="articles in currentPageArticles"> 
      <td>{{articles.idArticles}}</td> 
      <td>{{articles.artGroupName}}</td> 
      <td>{{articles.artName}}</td> 
      <td>{{articles.artPrice}}€</td> 
      <td>{{articles.egisArtId}}</td> 
      <td class="articles_active text-center">{{articles.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> 

S'il vous plaît aider.

Answer 1

Le problème que vous avez eu, c'est que vous mettez à jour les articles filtrés lors de la recherche, mais vous ne les appliquez pas dans le tableau. Avait une solution à ce sujet et voici le Working Plunkr

Code de Changé:

HTML:

<tr data-ng-repeat="articles in filteredArticles"> 
      <td>{{articles.idArticles}}</td> 
      <td>{{articles.artGroupName}}</td> 
      <td>{{articles.artName}}</td> 
      <td>{{articles.artPrice}}€</td> 
      <td>{{articles.egisArtId}}</td> 
      <td class="articles_active text-center">{{articles.active}}</td> 
    </tr> 

JS:

$http.get('data.json').success(function (data) { 
      $scope.articles = data; 
      $scope.filteredArticles = data; 
      console.log($scope.articles); 
    })