Html 使用ngInclude包含多个零件_Html_Angularjs

Html 使用ngInclude包含多个零件

html angularjs

Html 使用ngInclude包含多个零件,html,angularjs,Html,Angularjs,我正在用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/a

我正在用

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>


网络应用
网络应用

每一个项目，我都要写另一个包括。有没有一种方法可以通过一个命令包含这些以及将来添加的内容？

首先，在控制器中创建字母表数组（）

这里的要点是使用

ng repeat

迭代任意数量的对象，并动态创建

ng include

元素。我使用alfabet作为文件名的占位符。在这种情况下，这可能有效，但不是我的答案。请编辑我的答案，但只需使用您喜欢的任何内容初始化数组。

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'];