使用 ngInclude 包含多个部分答案

【问题标题】：include multiple parts using ngInclude使用 ngInclude 包含多个部分
【发布时间】：2016-04-05 20:43:40
【问题描述】：

我正在用angularJS 制作WebApp，但有些事情让我很恼火。

<!doctype html>
<html>
<head>
<title>webapp</title>
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/app.js"></script>
</head>

<body ng-app="app">

<div class="container">
    <h1>WebApp</h1>
    <div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
        <div ng-include="'blocks/item.html'"></div>
        <div ng-include="'blocks/something.html'"></div>
        <div ng-include="'blocks/health.html'"></div>
        <div ng-include="'blocks/mana.html'"></div>
        <div ng-include="'blocks/running.html'"></div>
        <div ng-include="'blocks/out.html'"></div>
        <div ng-include="'blocks/of.html'"></div>
        <div ng-include="'blocks/ideas.html'"></div>
    </div>
</div>
</body>

</html>

每个项目，我都必须写另一个包含。有没有办法在一个命令中包含这些以及将来添加的任何内容？

【问题讨论】：

标签： html angularjs

【解决方案1】：

首先，在您的控制器中创建字母数组 (as shown here)

function genCharArray(charA, charZ) {
    var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
    for (; i <= j; ++i) {
        a.push(String.fromCharCode(i));
    }
    return a;
}
$scope.charArray = genCharArray('a', 'z'); // ["a", ..., "z"]

然后，在您的模板中：

<div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
    <div ng-repeat="letter in charArray" ng-include="'blocks/' + letter + '.html'"></div>
</div>

[编辑] 如果您想使用任何通用列表，而不是像原始帖子中那样专门使用字母表，只需使用一个数组并使用任何内容对其进行初始化。

$scope.charArray = ['lemon', 'tree', 'apple'];

这里的重点是使用ng-repeat 来迭代您喜欢的任意数量的对象，并适当地动态创建ng-include 元素。

【讨论】：

对不起。我使用 alfabet 作为文件名的占位符。这可能适用于那种情况，但不是我所拥有的。
编辑了我的答案，但只是用你喜欢的任何东西初始化数组。