Angular में क्रमबद्ध कई फ़ील्ड्स

Question

कोणीय में एक ही समय में कई क्षेत्रों का उपयोग करके कैसे सॉर्ट करें? उदाहरण के लिए समूह और फिर उप-समूह द्वारा मुट्ठी

$scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1},
    {'group':2,'sub':11}];

मैं इसे प्रदर्शित करना चाहता था

समूह: उप-समूह

1 1

1 - 2

1 - 20

2 - 1

2 - 10

2 - 11

<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:'group' | orderBy:'sub'" />

Answer 1

कृपया इसे देखें:

http://jsfiddle.net/JSWorld/Hp4W7/32/

<div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>

Comments

orderBy:['-group','sub']groupरिवर्स ऑर्डर द्वारा छँटाई के लिए ।

— दिमित्रि

क्या समूह फ़ील्ड को क्रम सूची में पहले स्थान पर रखने की प्राथमिकता है?

— ल्यूकोसरॉक

@luchosrock, हाँ यह उम्मीद के मुताबिक करता है। दिए गए jsfiddle के साथ खेलना आसानी से पुष्टि करता है कि प्रदान की गई फ़ील्ड के लिए बाएं से दाएं प्राथमिकता प्राथमिकता है।

— पैट्रिक रिफंडिनी

ध्यान दें कि वैकल्पिक रिवर्स ऑडर पैरामीटर किसी सरणी का समर्थन नहीं करता है जैसे कि अभिव्यक्ति परम करता है, लेकिन आप इसे छोड़ सकते हैं और इसके बजाय प्रत्येक सरणी आइटम पर सॉर्ट ऑर्डर प्रदान करते हैं ताकि वे अलग से उलट (या नहीं) हों। उदाहरण: orderBy: ['group', '-sub'] सामान्य क्रम में समूह द्वारा क्रमबद्ध होगा, फिर उल्टे क्रम में उप द्वारा। इस तरह से कुछ जटिल संयोजन प्राप्त करना संभव है।

— डैनियल नलबैच जूल

हमने अपनी दुकान में प्राथमिकता दी है कि ऐर आइटम को बूलियन प्रॉपर्टी देकर, फिर पहले विकल्प के रूप में उपयोग किया जाए। उदाहरण: orderBy: ['-featured', 'title'], जिसमें विशेष रुप से प्रदर्शित सच्चा आइटम शीर्ष (वर्णानुक्रम) पर होता है, फिर बाकी आइटम वर्णानुक्रम में सूचीबद्ध होते हैं।

— डैनियल नलबैच जूल

Answer 2

अगर आप कंट्रोलर के अंदर मल्टिपल फील्ड्स को सॉर्ट करना चाहते हैं तो इसका इस्तेमाल करें

$filter('orderBy')($scope.property_list, ['firstProp', 'secondProp']);

Https://docs.angularjs.org/api/ng/filter/orderBy भी देखें

Answer 3

<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:['group','sub']" />

एकाधिक क्रम के बजाय उपयोगकर्ता सरणी

Answer 4

कोणीय में 'ऑर्डरबाय' फिल्टर का उपयोग करके छँटाई की जा सकती है।

दो तरीके: 1. देखने से 2. नियंत्रक से

1. देखने से

वाक्य - विन्यास:

{{array | orderBy : expression : reverse}} 

उदाहरण के लिए:

 <div ng-repeat="user in users | orderBy : ['name', 'age'] : true">{{user.name}}</div>

2. नियंत्रक से

वाक्य - विन्यास:

$filter.orderBy(array, expression, reverse);

उदाहरण के लिए:

$scope.filteredArray = $filter.orderBy($scope.users, ['name', 'age'], true);

Answer 5

AngularJs फ़िल्टर करने के 2 तरीके हैं, एक {{}} का उपयोग करके HTML में और एक वास्तविक JS फ़ाइलों में ...

आप का उपयोग करके आप समस्या को हल कर सकते हैं:

{{ Expression | orderBy : expression : reverse}}

यदि आप इसे HTML में उपयोग करते हैं या कुछ का उपयोग करते हैं:

$filter('orderBy')(yourArray, yourExpression, reverse)

रिवर्स अंत में वैकल्पिक है, यह एक बूलियन को स्वीकार करता है और अगर यह सच है, तो यह आपके लिए एरे को उल्टा कर देगा, आपके एरे को रिवर्स करने का बहुत आसान तरीका ...

Comments

यहाँ भी एक नज़र है: docs.angularjs.org/api/ng/filter/orderBy

— Alireza

Answer 6

मैंने इस आसान कृति को किसी वस्तु के कई कॉलम / गुणों के आधार पर लिखा है। प्रत्येक क्रमिक कॉलम क्लिक के साथ, कोड अंतिम क्लिक किए गए स्टोर को संग्रहीत करता है और इसे क्लिक किए गए कॉलम स्ट्रिंग नामों की बढ़ती सूची में जोड़ देता है, उन्हें एक सरणी में रखते हुए सॉर्ट किया जाता है। अंतर्निहित एंगुलर "ऑर्डरबाय" फ़िल्टर केवल सॉर्ट एरे सूची को पढ़ता है और कॉलम को वहां संग्रहीत कॉलम के आदेश द्वारा कॉलम को आदेशित करता है। तो अंतिम क्लिक किया गया कॉलम नाम प्राथमिक आदेशित फ़िल्टर बन जाता है, पिछले वाले ने पूर्ववर्तीता में अगला क्लिक किया, आदि रिवर्स ऑर्डर एक बार में सभी कॉलम ऑर्डर को प्रभावित करता है और पूर्ण सरणी सूची सेट के लिए आरोही / अवरोही टॉगल करता है:

<script>
    app.controller('myCtrl', function ($scope) {
        $scope.sortArray = ['name'];
        $scope.sortReverse1 = false;
        $scope.searchProperty1 = '';
        $scope.addSort = function (x) {
            if ($scope.sortArray.indexOf(x) === -1) {
                $scope.sortArray.splice(0,0,x);//add to front
            }
            else {
                $scope.sortArray.splice($scope.sortArray.indexOf(x), 1, x);//remove
                $scope.sortArray.splice(0, 0, x);//add to front again
            }
        };
        $scope.sushi = [
        { name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
        { name: 'Philly', fish: 'Tuna', tastiness: 2 },
        { name: 'Tiger', fish: 'Eel', tastiness: 7 },
        { name: 'Rainbow', fish: 'Variety', tastiness: 6 },
        { name: 'Salmon', fish: 'Misc', tastiness: 2 }
        ];
    });
</script>
<table style="border: 2px solid #000;">
<thead>
    <tr>
        <td><a href="#" ng-click="addSort('name');sortReverse1=!sortReverse1">NAME<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
        <td><a href="#" ng-click="addSort('fish');sortReverse1=!sortReverse1">FISH<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
        <td><a href="#" ng-click="addSort('tastiness');sortReverse1=!sortReverse1">TASTINESS<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="s in sushi | orderBy:sortArray:sortReverse1 | filter:searchProperty1">
        <td>{{ s.name }}</td>
        <td>{{ s.fish }}</td>
        <td>{{ s.tastiness }}</td>
    </tr>
</tbody>
</table>

Answer 7

छँटाई के लिए बनाया गया पाइप। स्ट्रिंग और सरणी के दोनों को स्वीकार करता है, कई मूल्यों द्वारा छँटाई। कोणीय के लिए काम करता है (न कि कोणीयजेएस)। स्ट्रिंग और संख्या दोनों के लिए सॉर्ट का समर्थन करता है।

@Pipe({name: 'orderBy'})
export class OrderBy implements PipeTransform {
    transform(array: any[], filter: any): any[] {
        if(typeof filter === 'string') {
            return this.sortAray(array, filter)
        } else {
            for (var i = filter.length -1; i >= 0; i--) {
                array = this.sortAray(array, filter[i]);
            }

            return array;
        }
    }

    private sortAray(array, field) {
        return array.sort((a, b) => {
            if(typeof a[field] !== 'string') {
                a[field] !== b[field] ? a[field] < b[field] ? -1 : 1 : 0
            } else {
                a[field].toLowerCase() !== b[field].toLowerCase() ? a[field].toLowerCase() < b[field].toLowerCase() ? -1 : 1 : 0
            }
        });
    }
}

Comments

पुनश्च: वास्तव में मेरी राय में किसी ने वर्तमान में वास्तविक प्रश्न का उत्तर नहीं दिया है, क्योंकि यह एंगुलर के लिए है, न कि एंगुलरजस के लिए। मेरे समाधान कोणीय 2. से शुरू काम करता है पर कोणीय 7.2.15 परीक्षण किया

— एंड्रिस

जब यह प्रश्न पूछा गया था, तब आपको a) पर विचार करना चाहिए, और ख) जब पहले कोणीय 2 की घोषणा की गई थी।

— निक

@andris क्या आपके पास कहीं पर होस्ट किए गए कोड उदाहरण के लिए एक कार्य अंत है?

— रोलिंग स्टोन

क्षमा करें, लेकिन नहीं :(

— एंड्रिस

Answer 8

सुनिश्चित करें कि अंत उपयोगकर्ता के लिए छंटाई जटिल नहीं है। मैंने हमेशा सोचा था कि समूह और उप समूह को समझना थोड़ा जटिल है। यदि इसका तकनीकी अंतिम उपयोगकर्ता है तो यह ठीक हो सकता है।

Comments

यह एक प्रासंगिक "टिप्पणी" भी नहीं है। निश्चित रूप से इस सवाल का जवाब नहीं

— अफशीन मोज़ामी

क्या यह गलत है अपने आप से पूछें कि क्या वर्तमान दृष्टिकोण सबसे अच्छा है जब आपका जीयूआई विकास कर रहा है? अंतिम उपयोगकर्ता अनुभव मेरे लिए प्रासंगिक लगता है

— जेन्स एलेनियस

ऐसे बहुत से परिदृश्य हैं जहाँ कई गुणों द्वारा छँटाई करना उपयोगकर्ता को संगठन को समझने में आसान बनाता है। आप अनिवार्य रूप से चीजों को श्रेणियों में बांट रहे हैं।

— ओवेन जॉनसन