Question

由于这个AngularJS对我来说很新，我试图使用JSON和ng-repeat填充列表的下拉值。我看到“选择”的ng-option，但“li”没有任何内容

以下是我试图阅读的JSON文件：

private static async Task DoStuff<T>(int maxConcurrency, IEnumerable<T> items, Func<T, Task> createTask)
{
    var tasks = new List<Task>();
    foreach (var item in items)
    {
        if (tasks.Count >= maxConcurrency)
        {
            await Task.WhenAll(tasks);
            tasks.Clear();
        }
        var task = createTask(item);
        tasks.Add(task);
    }
    await Task.WhenAll(tasks);
}

JS文件如下所示，工作正常：

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

]

我希望以下面的格式生成：

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>

我提到了“json array disply in <li> using angular js”链接，但仍然没有运气。有人可以帮忙！

Answer 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

Answer 2

如果您正在寻找下拉菜单，您也可以这样做

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

如何使用JSON中的ng-repeat填充<li>中的值

2 个答案: