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"
              }
          ]

正如你所看到的，我试图获得这些值，但是因为我需要键，所以非常困难，即＆＃34;名称A-Z＆＃34;或＆＃34;相关性＆＃34;在我的下拉选项中。还需要使用默认属性来选择默认值。

Answer 1

我建议您重新格式化“sortBy”对象，以便更轻松地迭代它。

将数组更改为对象，并将键命名为下拉选项

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

然后，您可以使用“orderBy”过滤器，以便默认值位于列表顶部

<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>

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

1 个答案: