Как заполнить значения в <li>, используя ng-repeat из JSON

0

Поскольку этот AngularJS является новым для меня, я пытался заполнить выпадающее значение списка, используя JSON и ng-repeat. Я видел ng-option для "select", но ничего как такового для "li"

Ниже приведен фрагмент файла JSON, который я пытаюсь прочитать:

[
{
    "header": {
        "name": "Electronics",
        "subHeader": {
            "childHeader": [{
                    "name": "Mobiles",
                    "view": "#mobile"
                }, {
                    "name": "Tablet",
                    "view": "#tablet"
                }, {
                    "name": "Television",
                    "view": "#television"
                }, {
                    "name": "Headphones",
                    "view": "#headphones"
                }]
        }
    },
        "name": "Men",
        "subHeader": {
            "childHeader": [{
                    "name": "Shirts",
                    "view": "#shirts"
                }, {
                    "name": "T-Shirts",
                    "view": "#tshirts"
                }, {
                    "name": "Jeans",
                    "view": "#jeans"
                }, {
                    "name": "Trousers",
                    "view": "#trousers"
                }]
        }
    }

]

Файл JS приведен ниже и работает нормально:

var mainAngular = angular.module('myApp', ['ngRoute']);
mainAngular.controller('headerCategoryController', function($scope,$http) {
var hCat=  "./customAngular/headerCatalogue.json";
$http.get(hCat).success(function(response){
    $scope.categories=response;
});
});

Я хочу, чтобы он был создан в следующем формате:

            <div class="headerMenu" >
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Electronics<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="index_category.htm">Mobiles</a></li>
                                <li><a href="product.htm">Tablets</a></li>
                                <li><a href="cart.htm">Televisions</a></li>
                                <li><a href="checkout.htm">Headphones</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Men<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="index_category.htm">Shirts</a></li>
                                <li><a href="product.htm">T-Shirts</a></li>
                                <li><a href="cart.htm">Trousers</a></li>
                                <li><a href="checkout.htm">Jeans</a></li>
                            </ul>
                        </li>
                    </ul>
                    </div>

То, что я сейчас делаю, это:

<div class="headerMenu" ng-controller="headerCategoryController">
                    <ul class="nav navbar-nav" ng-repeat="category in categories">
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">{{category.header.name}}<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li ng-repeat="val in category"><a href="{{val.header.subHeader.childHeader.view}}">{{val.header.subHeader.childHeader.name}}</a></li>
                            </ul>
                        </li>
                    </ul>
</div>

Я ссылался на " json array disply in <li> с использованием угловой js " для этого, но до сих пор не повезло. Может кто-то, пожалуйста, помогите!

Теги:
angularjs-ng-repeat

2 ответа

1
Лучший ответ

Здесь фиксированная версия JSON, которую вы предоставили:

[
    {
        "name": "Electronics",
        "subHeader": [
            {
                "name": "Mobiles",
                "view": "#mobile"
            },
            {
                "name": "Tablet",
                "view": "#tablet"
            },
            {
                "name": "Television",
                "view": "#television"
            },
            {
                "name": "Headphones",
                "view": "#headphones"
            }
        ]
    },
    {
        "name": "Men",
        "subHeader": [
            {
                "name": "Shirts",
                "view": "#shirts"
            },
            {
                "name": "T-shirts",
                "view": "#tshirts"
            },
            {
                "name": "Trousers",
                "view": "#trousers"
            },
            {
                "name": "Jeans",
                "view": "#jeans"
            }
        ]
    }
]

Обратите внимание, как заголовки и подзаголовки являются массивами.

Далее, вид тоже должен был измениться:

<div class="headerMenu" ng-controller="headerCategoryController">
  <ul class="nav navbar-nav" ng-repeat="category in categories">
    <li class="dropdown">
      <a href="" class="dropdown-toggle" data-toggle="dropdown">{{category.name}}<b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li ng-repeat="subheader in category.subHeader"><a ng-href="{{subheader.view}}">{{subheader.name}}</a></li>
      </ul>
    </li>
  </ul>
</div>

Здесь работает plnkr: http://plnkr.co/edit/9UN6DjEuSZCtBjc1SOhK?p=preview

-1

Если вы ищете выпадение, вы можете сделать что-то подобное

<select ng-options="optionslist">
   <option value="">All</option>
</select>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню