javascript - 使用嵌套 json 时,排序在 ngTable 中不起作用

标签 javascript json angularjs sorting ngtable

我用 ngTable 在 angularjs 中创建了一个应用程序,该应用程序工作正常但排序不工作。我的 json 结构是嵌套的,但表中的值是正确的

谁能告诉我一些解决办法

我的代码如下

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>

脚本

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

最佳答案

ngtable 中使用嵌套数组的方式不合适,在您的情况下,您可以再次使数组 1 变暗并允许指令进行分组

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>

Controller

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

数据

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

这里几乎可以工作了 jsfiddle . 默认描述还没有工作(ver 0.3.1)

关于javascript - 使用嵌套 json 时,排序在 ngTable 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26649205/

相关文章:

javascript - 使用 lodash 将对象数组排序为 Top N,其中 n+1 为 "others"

angularjs - 在 angular.js 应用程序中全局进行错误处理的最佳方法是什么?

javascript - 单独的 JS 文件中的 Angular 指令?

javascript - 小计和总计自动计算

Javascript 背景更改器不起作用

Javascript 接口(interface)回调在 android webview API >= 21 和 GWT 2.7 javascript 中不起作用

javascript - d3.js - 同一页面上来自同一 JSON 对象不同部分的多个图表

javascript - 使用 JavaScript 解析 JSON 数据

javascript - 如果使用angular js的任何属性的所有json值都为null,如何隐藏表列

javascript - HTML <select> on select 事件的名称是什么?