2013-05-08 30 views
11

Jestem nowy w kwestii kątowej i potrzebuję porady na temat najlepszej trasy, aby uzyskać coś w rodzaju this. To jsFiddle nie działa, ale tutaj jest pomysł.Lista kontrolerów zagnieżdżonych js/element

Chcę mieć zakładki u góry z dostępnymi przedmiotami do wyboru. Po wybraniu elementu dane zostaną wypełnione poniżej.

Chciałem mieć ListController i ItemController, więc mogę oddzielić metody, które działają na liście kontra akt na przedmiocie; ponieważ chciałem, aby elementy można było aktualizować bezpośrednio. Dostaję wszystkie dane podczas ładowania strony, więc nie chcę dynamicznie ładować każdej karty.

Jak mogę to zrobić i/lub jak mogę naprawić skrzypce lub nowe skrzypce? 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> 

naprawdę chciałbym zachować kontrolery oddzielić i logika oddzielne.

+2

Jsfiddle wydaje się działać dokładnie zgodnie z opisem. Czy możesz wyjaśnić, co nie działa bardziej szczegółowo? –

+0

Z jakiej przeglądarki korzystasz? –

+3

To zabawne, pytanie pasuje dokładnie do mnie, a problem jest właściwie dobrą odpowiedzią: p – roland

Odpowiedz

4

Stworzyłem pewną funkcjonalność w ItemController do zilustrowania, jak można działać na nich oddzielnie: http://jsfiddle.net/jdstein1/LbAcz/

dodano kilka danych do kontrolera listy:

$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" 
    }] 
}]; 

I uregulowana kontroler artykuł:

app.controller('ItemController', ['$scope', function ($scope) { 
    $scope.selectItem = function (song) { 
     $scope.song.time++; 
    }; 
}]); 
Powiązane problemy