如何使用嵌套对象将ng-repeat中的数据作为角度js中的JSON数据进行排序 [英] How to order data in ng-repeat with nested objects as JSON data in angular js

问题描述

我想在角度视图中显示对象的属性数组。以下是对象

i want to show array of object's properties in angular view. following is the object

$scope._Json = {
    "foo": {
        "ItemDimension1": {
            "Item": "item1",
            "ItemIndex": 1,
            "SelectedItems": [{

                "Code": "Code1" 
            }]
        }
    },
    "bar": {
        "ItemDimension2": {
            "Item": "item2",
             "ItemIndex": 3,
            "SelectedItems": [{

                "Code": "code2" 
            }]
        },
        "ItemDimension3": {
            "Item": "item3",
            "ItemIndex": 2,
            "SelectedItems": [{

                "Code": "Code3" 
            }]
        }
    },
    "Lorem": {
        "ItemDimension4": {
           "Item": "item4",
            "ItemIndex": 5,
            "SelectedItems": [{

                "Code": "Code4" 
            }]
        }
    }
  };

我想在视图中显示这个

item1 - 1

item1 - 1

item3 - 2

item3 - 2

item2 - 3

item2 - 3

item4 - 5

item4 - 5

但它显示为

item4 - 5

item4 - 5

item2 - 3

item2 - 3

item3 - 2

item3 - 2

item1 - 1

item1 - 1

在视图模板中

<label ng-repeat="(catagory, items) in _Json">
          <li ng-repeat="(name, itemslist) in items | orderBy:'itemslist.ItemIndex'">

              <strong>{{itemslist.Item }}</strong> - <strong>{{itemslist.ItemIndex }}</strong> 

            </li>
       </label>

如何使用ItemIndex订购？

how to order this with ItemIndex ?

这是一个正确的方法吗？或者我想改变什么？

is this a proper method ? or do i want to change something?

关于 Angularjs OrderBy on ng-repeat不起作用我尝试过orderByobject但没有wrk

with respect to Angularjs OrderBy on ng-repeat doesn't work i have tried orderByobject but didnt wrk

检查此Plunker来源

check this Plunker source

http ：//plnkr.co/edit/UCnrGJjLLaEjP7K5geV0？p =预览

推荐答案

您需要<$ c的参数$ c> ng-repeat 要成为精确数组，以便内置命令工作。请参阅此问题：在ngRepeat中对哈希对象的值进行排序 - angularJS

You need parameter of ng-repeat to be actuall array in order for built in orderBy to work. See this question: sorting values of a hash object in ngRepeat - angularJS

我会插入underscore.js（或lodash）并提前转换您的数据。

I would plugin underscore.js ( or lodash) and convert your data upfront.

请参阅您的更新小提琴 http://plnkr.co/edit/odMCOp65zbyfbEfmU3FX?p=preview

See your updated fiddle http://plnkr.co/edit/odMCOp65zbyfbEfmU3FX?p=preview

添加映射到您的控制器（注意，这是简单的顶级，参考更新的小提琴两级映射）

add mapping to your controller (note, this is top level for simplicity, reference to updated fiddle for two level mapping)

$scope._Json = _.map($scope._Json, function( v, k) { 
    return { key: k, value: v}      
})

并将标记更改为（再次，为简单起见，此处仅为顶级，参考更新的plnkr进行两级更新）：

and change markup to (again, only top level here for simplicity, reference to updated plnkr for two level update):

<label ng-repeat="cat in _Json">
      <li ng-repeat="(name, itemslist) in cat.value | orderBy:'itemslist.ItemIndex'">        
          <strong>{{itemslist.Item }}</strong> - <strong>{{itemslist.ItemIndex }}</strong>               
      </li>
</label>

这篇关于如何使用嵌套对象将ng-repeat中的数据作为角度js中的JSON数据进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！