在 angularjs 中重新加载页面时，用于 entrylimit 的 ng-model 不起作用

Question

我想在重新加载页面时默认显示 5 个数据。但它显示空白，因为它无法 select 进入限制。我在控制器中使用 $scope 定义，但在重新加载页面时它不起作用。

dynamic_table.html

<div ng-controller="dashboard">
      <section id="main-content">
          <section class="wrapper">
              <!-- page start-->
              <div class="row" >
                <div class="col-sm-12">
              <section class="panel">
                  <div class="breadcrumbs">Home > <b>Customers</b></div>
              <header class="panel-heading">
                  Customers Table
              </header>


                  <div class="row" style="margin: 5px 0 0 0;">
        <div class="col-md-2">
            <select ng-model="entryLimit" class="form-control">
                <option>5</option>
                <option>10</option>
                <option>20</option>
                <option>50</option>
                <option>100</option>
            </select> 
        </div>
                      <div class="col-md-3" style="float:right;">
            <input type="text" ng-model="search" ng-change="filter()" placeholder="Search" class="form-control" />
        </div>
                       <div class="col-md-4">
            <h5>Filtered {{ filtered.length }} of {{ totalItems}} total customers</h5>
        </div>

    </div>
              <div class="panel-body">
                  <div class ="row">
              <div class="adv-table" ng-show="filteredItems > 0">
              <table  class="display table table-bordered table-striped" id="dynamic-table">
              <thead>
              <tr>
                  <th>S.No&nbsp;<a ng-click="sort_by('user_id');"><i class="glyphicon glyphicon-sort"></i></a></th>
                  <th>Name&nbsp;<a ng-click="sort_by('user_name');"><i class="glyphicon glyphicon-sort"></i></a></th>
                  <th>Phone No.&nbsp;<a ng-click="sort_by('mobile');"><i class="glyphicon glyphicon-sort"></i></a></th>
                  <th>Email ID&nbsp;<a ng-click="sort_by('email');"><i class="glyphicon glyphicon-sort"></i></a></th>
                  <th>Registration Date&nbsp;<a ng-click="sort_by('created_at');"><i class="glyphicon glyphicon-sort"></i></a></th>
                  <th>Status&nbsp;<a ng-click="sort_by('is_block');"><i class="glyphicon glyphicon-sort"></i></a></th>


              </tr>
              </thead>
              <tbody>
              <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"  class="gradeX" >
                  <td>{{data.user_id}}</td>
                  <td>{{data.user_name}}</td>
                  <td>{{data.mobile}}</td>
                  <td>{{data.email}}</td>
                  <td>{{data.created_at}}</td>
                  <td>{{data.is_block}}</td>
<!--              <button type="button" class="btn btn-{{buttonStyle}}" ng-click="toggle = !toggle">{{toggleText}}</button>-->
              </tr>

              </tbody>

              </table>

              </div>


                  </div>
                   <div class="col-md-12" ng-show="filteredItems == 0">
            <div class="col-md-12">
                <h4>No user found</h4>
            </div>
        </div>
        <div class="col-md-12" ng-show="filteredItems > 0">    
            <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>

        </div>
              </div>
              </section>
              </div>
              </div>

              <!-- page end-->
          </section>
      </section>
      </div>

loginController.js

app.controller('dashboard', function ($scope,$http,$cookies,$cookieStore,$timeout) {


    $.post('http://54.173.65.120:2500/customer_list',{

     access_token : $cookieStore.get('obj').accesstoken



  },function(data){


       //console.log(data);
        var dataArray = [];
    //     console.log(data["aaData"]);
    //    console.log(data["aaData"].length);
        data = JSON.parse(data);




       data.forEach(function(column){

           var d = {

               user_id: "" ,
                user_name: "" ,
                email: "",
                mobile: "",
                created_at: "",
                is_block: "",


            }


           var date = new Date(column.registration_datetime)
             d.user_id = column.user_id;
            d.user_name = column.first_name+" "+column.last_name;

            d.email = column.email;
            d.mobile = column.mobile;
            d.created_at = date.toString();            
            d.is_block = column.is_block;            


            //console.log(d)
            dataArray.push(d);





       }) 


         console.log(dataArray)
        $scope.list = dataArray;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 5; //max no of items to display in a page
        $scope.filteredItems = $scope.list.length; //Initially for no filter  
        $scope.totalItems = $scope.list.length;
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };

});

排序、过滤、分页等一切正常，只是问题最初是 select 数据数量为零。

Answer 1

尝试移动

$scope.currentPage = 1; //current page
$scope.entryLimit = 5; //max no of items to display in a page

在 $.post-success-function 之外（例如在 $.post 调用之前），以便在控制器加载时设置这些值。

编辑：

另外将数据赋值包装在应用调用中

$scope.$apply(function() {
 $scope.list = dataArray;           
 $scope.filteredItems = $scope.list.length; //Initially for no filter  
 $scope.totalItems = $scope.list.length;
});

在 angularjs 中重新加载页面时，用于 entrylimit 的 ng-model 不起作用

ng-model for entrylimit is not working when reload the page in angularjs

javascript

angularjs