2017-12-13 6 views
0

私はオブジェクトをコントローラの中に$ scope.addresscardsに格納しています。 jsは以下の通りです:ng-repeatのキーによるオブジェクトのカスタム並べ替え

var myApp = angular.module('myApp', []); 
function MyCtrl($scope) { 
    $scope.addresscards = { 
     "work_address": { 
      "location":"workLoc", 
      "address": "workAddr", 
      "flat_no": "worknumber", 
      "landmark": "workLandmark" 
     }, 
     "random1_address": { 
      "location":"someLoc", 
      "address": "SomeAddr", 
      "flat_no": "Somenumber", 
      "landmark": "someLandmark" 
     }, 
     "home_address": { 
      "location":"homeLoc", 
      "address": "homeAddr", 
      "flat_no": "homenumber", 
      "landmark": "homeLandmark" 
     }, 
     "random2_address": { 
      "location":"someLoc2", 
      "address": "SomeAddr2", 
      "flat_no": "Somenumber2", 
      "landmark": "someLandmark2" 
     } 
    }; 
} 

私はng-repeatを使ってアドレスを表示しています。

<div ng-controller="MyCtrl"> 
    <ul ng-repeat="(addressKey,addressVal) in addresscards"> 
    <li>{{addressKey}} has :: {{addressVal.location}},{{addressVal.address}}, {{addressVal.location}}, {{addressVal.address}}</li> 
    </ul> 
</div> 

私の出力は次のとおりです:ここではHTMLで

home_address has :: homeLoc, homeAddr, homeLoc, homeAddr 
random1_address has :: someLoc, SomeAddr, someLoc, SomeAddr 
random2_address has :: someLoc2, SomeAddr2, someLoc2, SomeAddr2 
work_address has :: workLoc, workAddr, workLoc, workAddr 

私は出力を表示するには、このような、そのオブジェクトは、オブジェクトがある場合は、それをwork_address、第一を表示する必要があるhome_address持っている場合表示する必要があります。オブジェクトの残りの部分はアルファベット順に表示する必要があります。

は、ここで私が表示したい結果が期待されています。私はORDERBYを使用して、それを試してみました

home_address has :: homeLoc, homeAddr, homeLoc, homeAddr 
work_address has :: workLoc, workAddr, workLoc, workAddr 
random1_address has :: someLoc, SomeAddr, someLoc, SomeAddr 
random2_address has :: someLoc2, SomeAddr2, someLoc2, SomeAddr2 

、それはオブジェクトでは動作しません。これをどのように達成するのですか?あなたがあなたのアドレスにプロパティを追加することができます

答えて

1

$scope.addresscards = { 
     "work_address": { 
      "location":"workLoc", 
      "address": "workAddr", 
      "flat_no": "worknumber", 
      "landmark": "workLandmark", 
      "sort" : "2" 
     }, 
     "random1_address": { 
      "location":"someLoc", 
      "address": "SomeAddr", 
      "flat_no": "Somenumber", 
      "landmark": "someLandmark" 
     }, 
     "home_address": { 
      "location":"homeLoc", 
      "address": "homeAddr", 
      "flat_no": "homenumber", 
      "landmark": "homeLandmark", 
      "sort" : "1" 
     }, 
     "random2_address": { 
      "location":"someLoc2", 
      "address": "SomeAddr2", 
      "flat_no": "Somenumber2", 
      "landmark": "someLandmark2" 
     } 
    }; 

オブジェクトや、あなたの中にあなたがアルファベット順のためのアドレスキーで最初にして自宅表示し、作業アドレスにソートすることにより、第1の複数のフィールドを[並べ替えができNG-繰り返します。

<ul ng-repeat="(addressKey,addressVal) in addresscards | orderBy:['sort','addressKey']"> 
    <li>{{addressKey}} has :: {{addressVal.location}},{{addressVal.address}}, {{addressVal.location}}, {{addressVal.address}}</li> 
    </ul> 

たり、コントローラ内の他のすべてのアドレスをソートし、リストの先頭に自宅や職場の住所を追加することができます。

Plunker

+0

私はこれを試しましたが、動作しません。 {{addressVal.address}}、{{addressVal.address}}、{{addressVal.location}}、{{addressVal.address}} { {}} ' –

+0

エラーが発生したためです。コンソールでエラーを共有してください。 – NTP

+0

エラーは、オブジェクトの '、'が欠落していたためです。エラーは削除されましたが、まだソートされていません。私はまだ同じ出力を得ています。 –

関連する問題