2016-04-05 10 views
1

'u kullanarak birden çok parçayı dahil et10 angularJS ile yapıyorum ve beni rahatsız eden bir şey var.ngInclude

<!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> 

Her öğe için başka bir tane daha yazmak zorundayım. Gelecekte bunları ve eklemeleri tek bir komutla dahil etmenin bir yolu var mı?

cevap

1

Öncelikle, sizin kumanda içinde şablonunda, (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"] 

Sonra alfabe dizi oluşturun:

<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> 

[değiştir] herhangi jenerik listeyle çalışmak istiyorsanız ve Özgün yazıdaki gibi alfabeyi değil, sadece bir dizi kullanın ve her ne olursa olsun onu ilklendirin. Burada

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

nokta sizin gibi nesnelerin herhangi bir sayı sürekli tekrarlanması ve dinamik uygun ng-include öğeleri oluşturmak için ng-repeat kullanıyor.

+0

Üzgünüz. Alfabetleri dosya isimleri için yer tutucu olarak kullandım. Bu bu durumda işe yarayabilir, ancak sahip olduğum gibi değil. – ziraak

+0

Cevabımı düzenledim, ancak diziyi istediğiniz gibi bir şeyle başlatabilirsiniz. – AlexD