使用数组中的对象的键创建下拉列表

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>