AngularJS没有输出没有错误

Question

很多小时后，我认为我的代码正在运行，但我的表中没有输出... 找不到错误... console.log($scope.articles)有全部文章。

jscode：

(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代码：

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

请帮助。

Answer 1

您遇到的问题是您在搜索过程中更新过滤条款，但是您不在表格中应用相同的过滤条款。对其有一个修复，这里是该Working Plunkr

更改代码：

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); 
    })