1

私はAngular jsを初めて使用し、ページネーションを使用して単純なグリッドを構築しようとしています. Entities次のようなファクトリ オブジェクトがあります。

 //app module
 angular.module('project',['ngRoute','controllers', 'services'])
     .config(['$routeProvider', function($routeProvider){
         $routeProvider
             .when('/',{
                 controller:'ListCtrl',
                 templateUrl:'list.html'
             })
             .when('/edit/:id',{
                 controller:'EditCtrl',
                 templateUrl:'form.html'
             })
             .otherwise({
                 redirectTo:'/'
             })
     }]);

//controller
 angular.module('controllers',[])
     .controller('ListCtrl',['$scope','Entities',function($scope ,Entities){
         Entities.get(function(data){
             $scope.entityCaption='Projects';
             $scope.entities=data;

         });          
       }])

// services module
 angular.module('services', [])
     .value('dataConfigs',
            {
                fetchUrl:'../fetch.php',
                saveUrl:'../save.php',
                entityName:'projects'
            }
       )
     .factory('Entities', ['$http','$filter','dataConfigs', function($http,$filter,dataConfigs){
         return{
             pageNo:1,
             rows:2,
             sortBy:'id',
             sortOrder:'desc',
             get: function(callback){
                 $http({
                     url: dataConfigs.fetchUrl + '?method=grid&table='+dataConfigs.entityName+'&page='+this.pageNo+'&rows='+this.rows+'&sidx='+this.sortBy+'&sord='+this.sortOrder+'&format=assoc',
                     method: "POST"
                  }).success(function (data) {
                      callback(data);
                  });
             },
             getById:function(id,callback){
                 $http({
                     url: dataConfigs.fetchUrl + '?method=grid&table='+dataConfigs.entityName+'&where_id='+id+'&page=1&rows=1&sidx=id&sord=asc&format=assoc',
                     method: "POST"
                 }).success(function (data) {
                         if(data.records==1)
                             callback(data.rows[0]);
                         else
                             callback({});
                 });
             },
             prevPage:function(){
                this.pageNo--;
             },
             setPage:function(){
                //set pageNo to N
             },
             nextPage:function(){
                 this.pageNo++;
             }
         };
     }]);

そして、ListCtrl の list.html ビューでEntitiesファクトリ オブジェクトを使用したいと考えています。

list.html

<div class="pagination pull-right">
        <ul>
            <li ng-class="{disabled: Entities.pageNo == 0}">
                <a href ng-click="Entities.prevPage();prePage()">« Prev</a>
            </li>
            <li ng-repeat="n in range(entities.total)" ng-class="{active: n == Entities.pageNo}" ng-click="Entities.setPage()">
                <a href ng-bind="n + 1">1</a>
            </li>
            <li ng-class="{disabled: Entities.pageNo == entities.total - 1}">
                <a href ng-click="Entities.nextPage()">Next »</a>
            </li>
        </ul>
    </div>

これが可能かどうかはわかりません。この問題に対処する方法を教えてください。ページネーションをEntitiesオブジェクトにバインドしたいのですが、すべてのページネーション/並べ替えはサーバー側で行われるため、白黒の編集ビューとリスト ビューを切り替えると、このオブジェクトはページ番号と並べ替え順序を記憶する必要があります。

サーバー側のスクリプトは、現在のページのレコード数、ページ数、行数を返します。例:

{"page":"1","total":4,"records":"8","rows":[..]}

もう 1 つは、 、およびEntities属性watchの値です。pageNosortOrdersortBy

4

1 に答える 1

5

HTML ビューからファクトリにアクセスしようとしていることに注意してください。

これは AngularJS では不可能です。

コントローラーの $scope にエンティティをバインドする必要があります。そして、$scope を介してビュー内のエンティティにアクセスできます。

$scope は、AngularJS のコントローラーとビューの間の接着剤です。このパターンは、Silverlight や WPF などの .NET テクノロジの MVVM に近いものです...

ドキュメントのこの部分を読んで、AngularJS が内部でどのように機能するかを本当に理解してください!

http://docs.angularjs.org/guide/concepts

それが役に立てば幸い ！

于 2014-02-19T08:38:39.010 に答える