Angular Список или список вложенных контроллеров js
Я новичок в angular и хотел получить совет по лучшему маршруту, чтобы достичь чего-то вроде этого. Этот jsFiddle не работает, но вот идея.
Я хочу, чтобы вкладки были сверху, с элементами, доступными для выбора. Когда вы выбираете элемент, данные заполняются ниже.
Я хотел иметь ListController и ItemController, поэтому я могу выделить методы, действующие в списке, против того, что действуют на элемент; так как я хотел, чтобы элементы были обновляемыми напрямую. Я получаю все данные на загрузке страницы, поэтому я не хочу загружать каждую вкладку динамически.
Как я могу это сделать и/или как я могу исправить скрипку или новую скрипку?
jsFiddle
plunker
<div ng-app="myApp">
<div ng-controller="ListController">
<ul class="nav nav-pills">
<li ng-repeat="artist in list">
<a show-tab="" ng-href="" ng-click="select(artist)">{{$index}} - {{artist.name}}</a>
</li>
</ul>
<div ng-controller="ItemController">
<p>{{name}} - {{selected.name}}</p>
<span>{{totalSongs}}</span>
<span>{{selected.songs.length}}</span>
<ul>
<li ng-repeat="song in selected.songs" ng-controller="ItemController">{{song}} - {{totalSongs}}</li>
</ul>
</div>
</div>
</div>
Я бы очень хотел, чтобы контроллеры были разделены и логически разделены.
Ответы
Ответ 1
Я создал некоторую функциональность в ItemController, чтобы проиллюстрировать, как вы можете действовать на них отдельно:
http://jsfiddle.net/jdstein1/LbAcz/
Добавлены некоторые данные в контроллер списка:
$scope.list = [{
name: "Beatles",
songs: [{
title: "Yellow Submarine",
time: "424"
}, {
title: "Helter Skelter",
time: "343"
}, {
title: "Lucy in the Sky with Diamonds",
time: "254"
}]
}, {
name: "Rolling Stones",
songs: [{
title: "Ruby Tuesday",
time: "327"
}, {
title: "Satisfaction",
time: "431"
}]
}];
И построил контроллер элемента:
app.controller('ItemController', ['$scope', function ($scope) {
$scope.selectItem = function (song) {
$scope.song.time++;
};
}]);