orderBy หลายสาขาในเชิงมุม


382

วิธีการจัดเรียงโดยใช้หลายฟิลด์ในเวลาเดียวกันเป็นมุม? กำปั้นตามกลุ่มแล้วโดยกลุ่มย่อยสำหรับตัวอย่าง

$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'" />

คำตอบ:


659

โปรดดูสิ่งนี้:

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

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

137
orderBy:['-group','sub']สำหรับการเรียงลำดับโดยเรียงgroupกลับกัน
Dmitriy

1
ฟิลด์กลุ่มมีลำดับความสำคัญสำหรับการเป็นอันดับแรกในรายการโดยเรียงลำดับหรือไม่
luchosrock

5
@ luchosrock ใช่มันเป็นไปตามที่คาดไว้ การเล่นด้วย jsfiddle ที่ให้มาได้อย่างง่ายดายยืนยันการเรียงลำดับจากซ้ายไปขวาสำหรับฟิลด์การเรียงที่ให้ไว้
Patrick Refondini

2
โปรดทราบว่าพารามิเตอร์ reverseOrder ที่เป็นทางเลือกไม่สนับสนุนอาเรย์เช่นนิพจน์พารามิเตอร์ แต่คุณสามารถละเว้นได้และให้เรียงลำดับการเรียงในแต่ละไอเท็มอาร์เรย์เพื่อให้พวกเขากลับกัน (หรือไม่) ตัวอย่าง: orderBy: ['group', '-sub'] จะจัดเรียงตามกลุ่มในแบบปกติแล้วเรียงตามลำดับย้อนกลับ เป็นไปได้ที่จะได้รับชุดค่าผสมที่ซับซ้อนด้วยวิธีนี้
Daniel Nalbach

1
เราจำลองลำดับความสำคัญในร้านค้าของเราโดยกำหนดให้รายการบูลีนเป็นบูลีนจากนั้นใช้เป็นตัวเลือกแรก ตัวอย่าง: orderBy: ['-featured', 'title'] ซึ่งทำให้รายการจริงที่โดดเด่นอยู่ด้านบน (ตัวอักษร) จากนั้นรายการที่เหลือจะเรียงตามตัวอักษร
Daniel Nalbach


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

อาร์เรย์ผู้ใช้แทนการสั่งซื้อหลายรายการโดย BY


5

การเรียงลำดับสามารถทำได้โดยใช้ตัวกรอง 'orderBy' เป็นมุม

สองวิธี: 1. จากมุมมอง 2. จากตัวควบคุม

  1. จากมุมมอง

ไวยากรณ์:

{{array | orderBy : expression : reverse}} 

ตัวอย่างเช่น:

 <div ng-repeat="user in users | orderBy : ['name', 'age'] : true">{{user.name}}</div>
  1. จากตัวควบคุม

ไวยากรณ์:

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

ตัวอย่างเช่น:

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

5

มี 2 ​​วิธีในการทำตัวกรอง AngularJs หนึ่งวิธีใน HTML โดยใช้ {{}} และอีกวิธีหนึ่งในไฟล์ JS จริง ...

คุณสามารถแก้ปัญหาของคุณโดยใช้:

{{ Expression | orderBy : expression : reverse}}

ถ้าคุณใช้ใน HTML หรือใช้สิ่งที่ชอบ:

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

การย้อนกลับเป็นทางเลือกในตอนท้ายยอมรับบูลีนและถ้าเป็นจริงมันจะย้อนกลับอาร์เรย์สำหรับคุณวิธีที่มีประโยชน์มากในการย้อนกลับอาร์เรย์ของคุณ ...


นอกจากนี้ที่นี่เพื่อดู: docs.angularjs.org/api/ng/filter/orderBy
Alireza

0

ฉันเขียนชิ้นส่วนที่มีประโยชน์นี้เพื่อจัดเรียงตามหลายคอลัมน์ / คุณสมบัติของวัตถุ ด้วยการคลิกแต่ละคอลัมน์ที่ต่อเนื่องกันรหัสจะจัดเก็บคอลัมน์สุดท้ายที่คลิกและเพิ่มลงในรายการที่เพิ่มขึ้นของชื่อสตริงคอลัมน์ที่ถูกคลิกวางไว้ในอาร์เรย์ที่ชื่อว่า sortArray ฟิลเตอร์ Angular "orderBy" ในตัวจะอ่านรายการ sortArray และเรียงลำดับคอลัมน์ตามลำดับชื่อคอลัมน์ที่จัดเก็บไว้ที่นั่น ดังนั้นชื่อคอลัมน์ที่ได้รับการคลิกครั้งสุดท้ายจะกลายเป็นตัวกรองที่ได้รับคำสั่งหลักก่อนหน้านี้ได้คลิกที่ลำดับความสำคัญก่อนหน้านี้ ฯลฯ ลำดับที่กลับกันจะมีผลต่อลำดับของคอลัมน์ทั้งหมดในครั้งเดียวและสลับเป็นเรียงลำดับ

<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>

0

สร้างไปป์แล้วสำหรับการจัดเรียง ยอมรับทั้งสตริงและอาร์เรย์ของสตริงเรียงลำดับตามค่าหลายค่า ใช้งานได้กับ Angular (ไม่ใช่ AngularJS) รองรับการเรียงลำดับทั้งสำหรับสตริงและตัวเลข

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

1
PS: จริง ๆ แล้วในความคิดของฉันไม่มีใครตอบคำถามจริงในขณะนี้เพราะมันคือ Angular ไม่ใช่ AngularJS วิธีแก้ปัญหาของฉันเริ่มต้นจาก Angular 2 ทดสอบบน Angular 7.2.15
Andris

คุณควรพิจารณาก) คำถามนี้ถูกถามเมื่อใดและข) เมื่อใดที่มีการประกาศ Angular 2 เป็นครั้งแรก
นิค

@ andris คุณมีตัวอย่างการสิ้นสุดการทำงานเพื่อวางโค้ดที่โฮสต์อยู่ที่ไหน?
หินกลิ้ง

ขออภัย แต่ไม่ใช่ :(
Andris

-8

ตรวจสอบให้แน่ใจว่าการเรียงลำดับนั้นไม่ซับซ้อนสำหรับผู้ใช้ ฉันมักจะคิดว่าการเรียงลำดับในกลุ่มและกลุ่มย่อยมีความซับซ้อนเล็กน้อยที่จะเข้าใจ หากเป็นผู้ใช้ทางเทคนิคอาจเป็นไปได้


นี่ไม่ใช่แม้แต่ "ความคิดเห็น" ที่เกี่ยวข้อง แน่นอนว่าไม่ใช่คำตอบสำหรับคำถาม
Afshin Moazami

มันผิดไหมถ้าถามตัวคุณเองว่าแนวทางปัจจุบันดีที่สุดเมื่อคุณพัฒนา GUI หรือไม่? ประสบการณ์ผู้ใช้ปลายทางรู้สึกเกี่ยวข้องกับฉัน
Jens Alenius

มีสถานการณ์จำลองมากมายที่การเรียงลำดับตามคุณสมบัติหลายอย่างทำให้ผู้ใช้เข้าใจองค์กรได้ง่ายขึ้น คุณกำลังจัดกลุ่มสิ่งต่าง ๆ เป็นหมวดหมู่
Owen Johnson
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.