2014-10-20 5 views
23

मैं पूर्णांक के रूप में कुंजी द्वारा कैसे ऑर्डर कर सकता हूं?एनजी-दोहराने में ऑब्जेक्ट कुंजी द्वारा ऑर्डर

मैं निम्नलिखित वस्तु है;

$scope.data = { 
    "0": { data: "ZERO" }, 
    "1": { data: "ONE" }, 
    "2": { data: "TWO" }, 
    "3": { data: "TREE" }, 
    "5": { data: "FIVE" }, 
    "6": { data: "SIX" }, 
    "10":{ data: "TEN" }, 
    "11": { data: "ELEVEN" }, 
    "12": { data: "TWELVE" }, 
    "13": { data: "THIRTEEN" }, 
    "20": { data: "TWENTY"} 
} 

HTML:

<div ng-repeat="(key,value) in data"> 

वर्तमान आउटपुट आदेश 1,10,11,12,13,14,2,20,3,4,5,6

है लेकिन मैं 1,2,3,4,5,6,10,11,12,13,14,20

| orderBy:key 

चाहते मेरे लिए काम नहीं करते।

कोई भी विचार?

धन्यवाद!

+0

आप नहीं कर सकते - 'ng-repeat' के भीतर 'ऑर्डरबी' निर्देश केवल सरणी पर लागू होता है। – tymeJV

+0

हम्म ... आप एक फ़िल्टर के साथ सक्षम हो सकते हैं जो इसे दो गुणों के साथ ऑब्जेक्ट्स की एक सरणी में बदल देता है, 'कुंजी:' कुंजीनाम ', मान: <संपत्ति मान>' लेकिन आप निश्चित रूप से करेंगे उस संरचना से मेल खाने के लिए अपने टेम्पलेट को बदलने के लिए। –

उत्तर

18

एक विकल्प एक मध्यवर्ती फ़िल्टर का उपयोग करेगा।

PLUNK और कोड स्निपेट

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

 
app.controller('MainCtrl', function($scope) { 
 
    
 
    $scope.template = { 
 
    "0": { data: "ZERO" }, 
 
    "1": { data: "ONE" }, 
 
    "2": { data: "TWO" }, 
 
    "3": { data: "TREE" }, 
 
    "5": { data: "FIVE" }, 
 
    "6": { data: "SIX" }, 
 
    "10":{ data: "TEN" }, 
 
    "11": { data: "ELEVEN" }, 
 
    "12": { data: "TWELVE" }, 
 
    "13": { data: "THIRTEEN" }, 
 
    "20": { data: "TWENTY"} 
 
    } 
 
    
 
}); 
 

 
app.filter('toArray', function() { return function(obj) { 
 
    if (!(obj instanceof Object)) return obj; 
 
    return _.map(obj, function(val, key) { 
 
     return Object.defineProperty(val, '$key', {__proto__: null, value: key}); 
 
    }); 
 
}});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script> 
 

 
<body ng-app="app" ng-controller="MainCtrl"> 
 
    <div ng-repeat="(key, value) in template| toArray | orderBy:key">{{key}} : {{value.$key}} : {{value.data}}</div> 
 
<body>

नोट:

ऊपर फ़िल्टर Underscore.js की आवश्यकता है, अगर आप इसका इस्तेमाल नहीं करते हैं, फिल्टर पुनर्लेखन कर सकते हैं।

+2

मैं अंडरस्कोर उपयोग नहीं कर रहा देखना .js, क्या आप इसे फिर से लिखना चाहते हैं? – Scipion

+1

इस फ़िल्टर का बोवर पैक संस्करण: https://github.com/petebacondarwin/angular-toArrayFilter –

2

मैं यह अपने आप में एक सरणी के लिए एक रूपांतरण के साथ को ठीक कर लेगा लगता है। जानबूझ का मजाक।

var obj = {"3": {three:3}, 2: {two:2}, "5": {five:5}, 4: {four:4}, 
    1: {one:1}, 6: {six:6}, 10: {ten:10}, 11:{eleven:11} 
} 

$scope.arr = []; 

for (var o in obj) 
    $scope.arr.push(obj[o]) 
+0

एफवाईआई यह पंकर मर चुका है। –

+0

यह "obj" वस्तु है, जो इसकी गारंटी नहीं है की संपत्ति यात्रा आदेश पर निर्भर करता है, https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order – Rich

0
app.filter('orderObjectBy', [function() { 
    return (filterObj, prop) => { 

    let arr = [] 
    //below is the loadash function you can use for in also 
    _.forEach(filterObj, function(value, key) { 
    arr.push({ 
    key: key, 
    value: value 
    }); 
    }); 

let sortedArr = _.sortBy(arr, val => val.value[prop]); 

    for (let variableKey in filterObj) { 
if (filterObj.hasOwnProperty(variableKey)) { 
    delete filterObj[variableKey]; 
    } 
    } 

    for (let data of sortedArr) { 
filterObj[data.key] = data.value; 
} 


    return filterObj; 

    } 
}]) 
संबंधित मुद्दे