配列内のオブジェクトのキーを使用してドロップダウンを作成する

Question

タイトルが非常にはっきりとわかるように、オブジェクトの配列を読み込んでカスタムのドロップダウンを作成したい。カスタムドロップダウンには、デフォルト値としてのアンカータイトルと値を表示するリストがあります。構造は以下の通りです：

<div class="sort-select"> 
<a href="" ng-click="showList =! showList;" ng-init="showList=false;"> 
Sort By: <span class="info sort-state">Closest Match</span> 
</a> 
<ul ng-class="{'animate-list':showList}" ng-repeat = "sortByOption in healthResultsInfo.sortBy"> 
    <li ng-repeat = "(key,value) in sortByOption"><a href="{{value[0]}}">{{key}}</a></li> 
</ul> 
</div> 

JSONの構造は以下の通りです：あなたは、私は値を取得しようとしている見ることができるように

"sortBy": [ 
       { 
        "Relevance": "/shop?ns=relevance", 
        "default": "true", 
        "selected": "true" 
       }, 
       { 
        "Name A-Z": "/shop?ns=relevance", 
        "default": "false", 
        "selected": "true" 
       } 
      ] 

が、私は、キーすなわち必要があるとして、それはかなり困難ですドロップダウンオプションで「名前AZ」または「関連性」を選択します。また、既定値を選択するために、既定のプロパティを使用する必要があります。

Answer 1

"sortBy"オブジェクトの再フォーマットをお勧めします。

デフォルト値がリスト

の一番上にあるように、あなたはその後、「ORDERBY」フィルタを使用することができますオプション

sortBy: { 
    Relevance: { 
     url: '/shop?ns=relevance', 
     default: true, 
     selected: true 
    }, 
    'Name A-Z': { 
     url: '/shop?ns=relevance', 
     default: false, 
     selected: true 
    } 
} 

ドロップダウンを対象に、あなたの配列を変更し、あなたの鍵に名前を付け

<div class="sort-select"> 
    <a href="" ng-click="showList =! showList;" ng-init="showList=false;"> 
     Sort By: <span class="info sort-state">Closest Match</span> 
    </a> 
    <ul ng-class="{'animate-list':showList}"> 
     <li ng-repeat = "(key,value) in healthResultsInfo.sortBy | orderBy:'default'"> 
     <a href="{{value.url}}">{{key}}</a> 
     </li> 
    </ul> 
</div>