使用數組中的對象的鍵創建下拉列表

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」對象以更容易地對其進行迭代。

您的數組更改爲一個對象，並命名你的鑰匙下拉選項

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>