angular js nested controllers list/item

Question

I am new to angular and wanted advice on the best route to achieve something like this. This jsFiddle doesn't work but here is the idea.

I want tabs along the top with items available for selection. When you select the item, the data is populated below.

I wanted to have a ListController and an ItemController, so i can separate out the methods that act on the list vs that act on the item; since i wanted the items to be updatable directly. I am getting all the data on the page load, so i don't want to load each tab dynamically.

How can i do this and/or how can i fix the fiddle or new fiddle? 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>

I would really like to keep the controllers separate and logic separate.

The jsfiddle seems to work exactly according to your description. Could you explain what is not working in more detail? — Selvam Palanimalai
– Selvam Palanimalai, Commented May 23, 2013 at 10:14
That's funny, the question matches exactly mine and the problem is actually the good answer :p — roland
– roland, Commented Jul 27, 2013 at 9:50

jdstein1 · Accepted Answer · 2013-08-06 21:30:21Z

4

I created some functionality in the ItemController to illustrate how you could act on them separately: http://jsfiddle.net/jdstein1/LbAcz/

Added some data to the list controller:

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

And fleshed out the item controller:

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

answered Aug 6, 2013 at 21:30

jdstein1

1172 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular js nested controllers list/item

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related