单击按钮，在angularjs中对json对象列表进行排序

Question

I am trying to sort a nested list of json objects on one of the properties of which is a "date" field. 我试图在其中一个属性是“日期”字段的json对象的嵌套列表上排序。 The date field is in MM/dd/yyyy format. 日期字段采用MM/dd/yyyy格式。

This is the HTML code: 这是HTML代码：

<body ng-app="Test" ng-controller="TestController as testCtrl" ng-init="testCtrl.displayList()">
<ul ng-repeat="de in testCtrl.listToBeDisplayed">

<li >{{ de.empId }} {{ de.empName }} {{ de.joinDate }}</li>

</ul>

<button type="button" ng-click="testCtrl.sortList()">Test Button</button>

// This is the script: //这是脚本：

<script>
angular.module("Test",[]);

angular.module("Test").controller("TestController",TestController);

TestController.$inject = ['orderByFilter','$filter'];

function TestController(orderBy,$filter){


    vm = this;


    vm.demoList = [
        {
            "Employees" :
            [{
                "id" : "1001",
                "name": "Andre",
                "date": "05/20/2016"
            },
            {
                "id" : "1002",
                "name": "Chris",
                "date": "04/11/2016"
            },
            {
                "id" : "1003",
                "name": "Darren",
                "date": "03/11/2016"
            },
            {
                "id" : "1004",
                "name": "Marlen",
                "date": "08/11/2016"
            }]
        }           
                   ];
propertyName = 'date';


    vm.displayList = function(){
        console.log("in display List fn");
        empList=[];
        for(var i=0;i<vm.demoList[0].Employees.length;i++)
            {
                value = vm.demoList[0].Employees[i];

                console.log("value="+value);

                var employee = {
                    empId: '',
                    empName: '',
                    joinDate: ''
                };

                employee.empId = value.id;
                employee.empName = value.name;
    employee.joinDate = $filter('date')(new Date(value.date), "MM/dd/yyyy");

                empList[i] = employee;


            }
        vm.listToBeDisplayed = empList;

    }
</script>

    </body>

When I click the button, the list is not getting sorted properly. 单击按钮时，列表未正确排序。

I have referred Angular documentation for orderBy filter: https://docs.angularjs.org/api/ng/filter/orderBy 我已经为orderBy过滤器引用了Angular文档： https ：//docs.angularjs.org/api/ng/filter/orderBy

This is the plunker I created for the above situation: https://plnkr.co/edit/Q1m24arssRxC6B3NNO0n?p=preview 这是我为上述情况创建的plunker： https ：//plnkr.co/edit/Q1m24arssRxC6B3NNO0n？p = preview

Any help on this ? 对此有何帮助？

Answer 1

Call the correct function in your html: 在你的html中调用正确的函数：

<button type="button" ng-click="testCtrl.sortList()">Test Button</button>

And order on correct property name: 并订购正确的属性名称：

vm.sortList = function () {
    vm.listToBeDisplayed = orderBy(empList, 'joinDate', true);
}

单击按钮，在angularjs中对json对象列表进行排序

问题描述

1 个解决方案

解决方案1
0 2016-06-19 09:00:27

单击按钮，在angularjs中对json对象列表进行排序

问题描述

1 个解决方案

解决方案1 0 2016-06-19 09:00:27

解决方案1
0 2016-06-19 09:00:27