Создать раскрывающийся список, используя ключи объектов в массиве

Question

Создать раскрывающийся список, используя ключи объектов в массиве

0

Поскольку заголовок предлагает это очень четко, я хочу прочитать массив объектов и создать выпадающее меню. Пользовательский снимок имеет заголовок якоря в качестве значения по умолчанию и список для отображения значений. Структура выглядит следующим образом:

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

Как вы можете видеть, я попытался получить значения, но это довольно сложно, так как мне нужны ключи, то есть "Name AZ" или "релевантность" в моих вариантах выпадающего списка. Также необходимо использовать свойство по умолчанию, чтобы выбрать значение по умолчанию.

Jyotirmoy Pan 25 апр. 2016, в 22:06

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

BGilman · Answer 1 · 2016-04-25T18-54-00.000Z

Я бы порекомендовал вам переформатировать свой объект sortBy для более простого итерации.

Измените свой массив на объект и назовите свои ключи опцией drop down

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>

Я не уверен насчет варианта форматирования. Также не обязательно, чтобы первый вариант всегда был сверху. Также мне нужно выбрать значение, имеющее значение по умолчанию, как true в теге привязки. Извините, но вашего решения недостаточно. Спасибо за попытку, хотя.