Поскольку этот 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 " для этого, но до сих пор не повезло. Может кто-то, пожалуйста, помогите!
Здесь фиксированная версия 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
Если вы ищете выпадение, вы можете сделать что-то подобное
<select ng-options="optionslist">
<option value="">All</option>
</select>