由于这个 AngularJS 对我来说是新的，我试图使用 JSON 和 ng-repeat 填充列表的下拉值。我看到了 "select" 的 ng-option，但没有看到 "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> using angular 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"
}
]
}
]
注意标题和子标题如何是数组。
接下来， View 也必须改变一点:
<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
关于javascript - 如何使用 JSON 中的 ng-repeat 填充 <li> 中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31121672/