Working with AngularJS is a new experience for me, and I'm currently attempting to populate a dropdown list using JSON and ng-repeat. While I found ng-option for "select", I couldn't find a similar solution for using "li" elements.
Here is a snippet of the JSON file I'm trying to work with:
[
{
"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"
}]
}
}
]
The JavaScript file that I'm currently using looks like this:
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;
});
});
My desired output format is as follows:
<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>
Currently, I have the following implementation:
<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>
I have been following the "json array disply in <li> using angular js" guide, but I'm still facing some challenges. Any help would be greatly appreciated!