ng-repeat wewnątrz UL (który znajduje się wewnątrz P) nie działa
AKTUALIZACJA: Wygląda na to, że Angular.js nie lubi <ul> wewnątrz <p>. Tak więc, jak powiedzieli pomocni komentatorzy, zastąpienie <p> <div> rozwiązuje problem.
Przepraszamy, jeśli to może być pytanie dla początkujących na Angular.js, ale po prostu nie mogę znaleźć błędu w tym kodzie. Rozważ następujący kod HTML:
<div ng-app ng-controller="BlocksCtrl">
<div ng-repeat="block in blocks">
<div id="{{block.id}}" class="{{block.classes}}">
<div>
<h1>{{block.title}}, {{block.dates}}
<br/>
<small>
<a href="{{block.place.link}}" target="_blank">
{{block.place.title}}</a>
({{block.place.city_country}})
</small>
</h1>
</div>
<div>
<div>
<p><i class="{{block.icon_classes}}"></i></p>
</div>
<div>
<p>
{{block.description.text}}
</p>
<p ng-repeat="item in block.description.items">
<b>{{item.title}}</b>: {{item.points.length}} - {{item.points[2].text}}
<ul class="fa-ul">
<li>
<i class="fa-li fa fa-check"></i>{{item.points[2].text}}
</li>
<li ng-repeat="point in item.points">
<i class="fa-li fa fa-check"></i>{{point.text}}
</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
To jest bit Javascript:
function BlocksCtrl($scope) {
$scope.blocks = [
{
id: 'my-id',
classes: 'class1 class2',
title: 'This is the title',
dates: '2007 / 2011',
place: {
link: 'http://www.example.com/',
title: 'This is the place',
city_country: 'City, Country'
},
icon_classes: 'fa fa-terminal fa-5x',
description: {
text: 'description test',
items: [
{
title: 'Title test',
points: [
{text: 'item test 1'},
{text: 'item test 2'},
{text: 'item test 3'},
{text: 'item test 4'}
]
}
]
}
}
];
}
Spowoduje to wyświetlenie następującego wyjścia (możesz sprawdzić przykład pracy na JSFiddlehttp://jsfiddle.net/uskL6/):
test opisowy
Test tytułu: 4 - test przedmiotu 3
Teraz ktoś może mi powiedzieć, jak to jest, że bit {{item.points.length}} - {{item.points [2] .text}} "działa dobrze, ale" {{item.points [2] .text }} "a ng-repeat wewnątrz UL nie?
Wielkie dzięki