角js嵌套控制器列表/项

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.

我对有棱角的东西不太熟悉，想知道怎样才能达到这样的效果。这个jsFiddle不起作用，但是这里有一个概念。

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.

我想要一个ListController和一个ItemController，这样我就可以把作用于列表的方法和作用于项目的方法分开;因为我希望这些项目可以直接更新。我正在获取页面加载的所有数据，所以我不想动态地加载每个选项卡。

How can i do this and/or how can i fix the fiddle or new fiddle? jsFiddle plunker

我如何做这个和/或我如何修理小提琴或新小提琴?jsFiddle砰砰作响

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

我真的想把控制器和逻辑分开。

1 个解决方案

#1

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

我在ItemController中创建了一些功能，以说明如何分别处理它们: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++;
    };
}]);

#1