使用嵌套JSON排序时不ngTable工作 [英] Sorting is not working in ngTable when using nested json

查看:134
本文介绍了使用嵌套JSON排序时不ngTable工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经创建了angularjs与ngTable的应用程序,该应用程序工作正常,但排序不工作。我的JSON结构嵌套,但值与表正确地到来

谁能告诉我,这一些解决方案

我的code为如下

给出

的jsfiddle

HTML

 < D​​IV NG控制器=IndexCtrl>
    <表边框=1NG表=mytable的>
         < TBODY NG重复=PEOP在人们>
        < TR NG重复=人PEOP>
            < TD排序='ID'数据标题='ID'> {{people.id}}< / TD>
            < TD排序='DESIG'数据标题='DESIG'> {{people.desig}}< / TD>
            < TD排序=名称数据标题='名'> {{people.name}}< / TD>
            < TD排序='地方'数据标题='地方'> {{people.place}}< / TD>
        < / TR>
        < / TBODY>
    < /表>
< / DIV>

脚本

  VAR应用= angular.module('应用',['ngTable']);app.controller('IndexCtrl',函数($范围,$过滤器,ngTableParams){
  $ scope.peoples = {
    ime123:[{ID:145,
                DESIG:医生,
                名:马努,
                地方:ABCD
               }],
    ime148:[{ID:148,
                DESIG:工程师,
                名:约翰,
                地方:POLK
               },
               {
                ID:150,
                DESIG:科学家,
                名:玛丽,
                地方:使用
               }]
  };
        $ scope.mytable =新ngTableParams({
        排序:{
            名称:'说明'
        }
    },{
        的getData:函数($延迟,则params){
        $ scope.peoples = $滤波器('ORDERBY')($ scope.peoples,params.orderBy());
        $ defer.resolve($ scope.peoples);
        }
    });
});


解决方案

您在的 ngtable 是不适合的,你的情况,你可以让阵列中的一个又暗淡,并允许指令groupping

HTML

 <表边框=1NG表=mytable的>
        < TBODY NG重复=PEOP在$组>
            < TR NG重复=人peop.data>
                < TD排序=ID数据标题='ID'> {{people.id}}< / TD>
                < TD排序=DESIG数据标题='DESIG'> {{people.desig}}< / TD>
                < TD排序=名称数据标题='名'> {{people.name}}< / TD>
                < TD排序=到位数据标题='地方'> {{people.place}}< / TD>
            < / TR>
        < / TBODY>
    < /表>

位指示

  $ scope.mytable =新ngTableParams({
        页面:1,//显示第一页
        数:10,//每页计
        排序:{
            名称:'说明'
        }
    },{
        总:peoples.length,
        GROUPBY:'群',
        的getData:函数($延迟,则params){
            人民= $过滤器('排序依据')(人民params.orderBy());
            $ defer.resolve(人民);
        }
    });

数据

  VAR人民= {[
        ID:145,
            DESIG:医生,
            名:马努,
            地方:ABCD,
            群:ime123//进行分组
    },{
        ID:148,
            DESIG:工程师,
            名:约翰,
            地方:POLK
            群:ime148//进行分组
    },{
        ID:150,
            DESIG:科学家,
            名:玛丽,
            地方:使用
            群:ime148//进行分组
    }];

在这里几乎工作的jsfiddle
默认说明没有工作(版本0.3.1)

I have created an application in angularjs with ngTable, The application is working fine but sorting is not working. My json structured is nested, but values are coming correctly with the table

Can anyone please tell me some solution for this

My code is as given below

JSFiddle

html

<div ng-controller="IndexCtrl">
    <table border="1" ng-table="mytable">
         <tbody ng-repeat="peop in peoples">
        <tr ng-repeat="people in peop">
            <td sortable="'id'" data-title="'Id'">{{people.id}}</td>
            <td sortable="'desig'" data-title="'Desig'">{{people.desig}}</td>
            <td sortable="'name'" data-title="'Name'">{{people.name}}</td>
            <td sortable="'place'" data-title="'Place'">{{people.place}}</td>
        </tr>
        </tbody>
    </table>
</div>

script

var app = angular.module('app', ['ngTable']);

app.controller('IndexCtrl', function ($scope, $filter, ngTableParams) {
  $scope.peoples = {
    "ime123": [{"id": 145, 
                "desig": "doctor",
                "name": "Manu",
                "place": "ABCD"
               }],
    "ime148": [{"id": 148,
                "desig": "engineer",
                "name": "John",
                "place": "POLK"
               },
               {
                "id": 150,
                "desig": "scientist",
                "name": "Mary",
                "place": "USE"
               }]
  };    
        $scope.mytable = new ngTableParams({
        sorting: {
            name: 'desc'
        }
    }, {
        getData: function($defer, params) {
        $scope.peoples = $filter('orderBy')( $scope.peoples, params.orderBy());
        $defer.resolve( $scope.peoples);
        }
    });
});

解决方案

The way you work with nested array in ngtable is not suitable ,in your case you can make array one dim again and allow directive to groupping

html

<table border="1" ng-table="mytable">
        <tbody ng-repeat="peop in $groups">
            <tr ng-repeat="people in peop.data">
                <td sortable="id" data-title="'Id'">{{people.id}}</td>
                <td sortable="desig" data-title="'Desig'">{{people.desig}}</td>
                <td sortable="name" data-title="'Name'">{{people.name}}</td>
                <td sortable="place" data-title="'Place'">{{people.place}}</td>
            </tr>
        </tbody>
    </table>

contoller

$scope.mytable = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'desc'
        }
    }, {
        total: peoples.length,
        groupBy:'group',
        getData: function ($defer, params) {
            peoples = $filter('orderBy')(peoples, params.orderBy());
            $defer.resolve(peoples);
        }
    });

data

var peoples = [{
        "id": 145,
            "desig": "doctor",
            "name": "Manu",
            "place": "ABCD",
            "group": "ime123"  //for grouping
    }, {
        "id": 148,
            "desig": "engineer",
            "name": "John",
            "place": "POLK",
            "group": "ime148" //for grouping
    }, {
        "id": 150,
            "desig": "scientist",
            "name": "Mary",
            "place": "USE",
            "group": "ime148"  //for grouping
    }];

here almost working jsfiddle. default desc not working yet (ver 0.3.1)

这篇关于使用嵌套JSON排序时不ngTable工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆