AngularJs ng-lặp lại thứ tựBằng không làm việc cho các thuộc tính lồng nhau

Question

Tôi, cố gắng để ng-lặp lại các thuộc tính lồng nhau và sắp xếp chúng, nhưng thứ tự không hoạt động đối với tôi.

Tôi đã nhìn thấy điều này: How to orderby in AngularJS using Nested property

nhưng cơ cấu json là khác nhau và tôi không thể làm cho nó làm việc.

Plunker

Mã của tôi:

<div ng-repeat="item in data | orderBy:order.allListPosition"> 
     <div>{{item.name}} - {{item.order}}</div> 
    </div> 

Phạm vi:

$scope.data = { 
      "78962": { 
       "id": "78962", 
       "name": "item 2", 
       "type": "blind", 
       "order": { 
         "allListPosition": "008", 
         "catListPosition": "059" 
         }, 
       "data": { 
         "status": "stop", 
         "percent": 20 
         }, 
       "longPress": { 
         "item": "78966", 
         "active": true 
         } 
      }, 
      "78963": { 
        "id": "78963", 
        "name": "item 3", 
        "type": "coolmaster", 
        "order": { 
         "allListPosition": "053", 
         "catListPosition": "001" 
        }, 
        "data": { 
          "status": 1, 
          "temp": 16, 
          "point": 25, 
          "mode": "cool", 
          "fan": 3 
          }, 
       "longPress": { 
          "item": "78966", 
          "active": false 
          } 
       } 
      }; 

bất cứ ai có thể vui lòng chỉ cho tôi những gì tôi làm sai?

Thank của rất nhiều

Avi

Answer 1

Có hai lý do orderBy không hoạt động ở đây:

• orderBy chỉ hoạt động trên các mảng, nhưng bạn đang áp dụng nó cho một đối tượng đơn giản.
• Để đặt hàng theo một biểu thức, bạn cần cung cấp cho orderBy giá trị chuỗi có biểu thức. Bạn đang tặng cho nó order.allListPosition, số này tương đương với $scope.order.allListPosition (không tồn tại).

Để giải quyết vấn đề đầu tiên, thêm một mảng của các đối tượng dữ liệu của bạn:

$scope.dataArray = Object.keys($scope.data) 
    .map(function(key) { 
    return $scope.data[key]; 
    }); 

Để giải quyết vấn đề thứ hai (và kết hợp các dataArray từ trên cao):

<div ng-repeat="item in dataArray | orderBy:'order.allListPosition'"> 

http://plnkr.co/edit/BXgYPTElSM3sjvLg30CL?p=preview

Answer 2

Bạn có thể tạo một bộ lọc tùy chỉnh để đặt hàng bởi tính neasted.

myApp.filter('customorder', function() { 
    return function(items) { 
    items.sort(function(a,b){ 
     // Make sure we are comparing integers 
     var aPos = parseInt(a.order.allListPosition); 
     var bPos = parseInt(b.order.allListPosition); 

     // Do our custom test 
     if (aPos > bPos) return 1; 
     if (aPos < bPos) return -1;   
     return 0; 
    }) 
    } 
}); 

html của bạn sẽ trông giống như

<div ng-repeat="item in data | customorder"> 
    <div>{{item.name}} - {{item.order}}</div> 
</div> 

Bạn nên luôn luôn nghĩ rằng góc không phải là một ngôn ngữ restritive. các bộ lọc bạn thường sử dụng là built in filters. Nhưng bạn có thể vui chơi với bộ lọc của riêng bạn ngay khi bạn cần!

Answer 3

Đối tượng data là đối tượng của đối tượng chứ không phải một mảng đối tượng.

Do đó, orderBy sẽ không hoạt động vì nó chỉ tương thích với các mảng.

Tôi đã cập nhật đối tượng data của bạn để làm cho nó hoạt động:

$scope.data = [ 
      {    
       "id": "78961", 
       "name": "item 1", 
       "type": "blind", 
       "order":{allListPosition:"093",catListPosition: "009"}, 
       "data": { 
        "status": "up", 
        "percent": 80 
       }, 
       "longPress": { 
        "item": "78966", 
        "active": true 
       } 

      }, 
      { 
       "id": "78962", 
       "name": "item 2", 
       "type": "blind", 
       "order":{allListPosition:"008",catListPosition: "059"}, 
       "data": { 
        "status": "stop", 
        "percent": 20 
       }, 
       "longPress": { 
        "item": "78966", 
        "active": true 
       } 
      }, 
      { 

       "id": "78963", 
       "name": "item 3", 
       "type": "coolmaster", 
       "order":{allListPosition:"053",catListPosition: "001"}, 
       "data": { 
        "status": 1, 
        "temp": 16, 
        "point": 25, 
        "mode": "cool", 
        "fan": 3 
       }, 
       "longPress": { 
        "item": "78966", 
        "active": false 
       } 

      }]; 

Và trong HTML:

<div ng-repeat="item in data | orderBy:'order.allListPosition'"> 
    <div>{{item.name}} - {{item.order}}</div> 
</div> 

Plunker

Answer 4

Tôi chắc chắn điều này nên là:

<div ng-repeat="item in dataArray | orderBy:'item.order.allListPosition'">