角度jsネストされたコントローラリスト/アイテム

Question

私は角度が新しく、最良のルートについてはthisのようなものを達成するためのアドバイスが必要でした。この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> 

私は実際に分離し、ロジック別々のコントローラを維持したいと思います。

Answer 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++; 
    }; 
}]);