角度js嵌套控制器列表/項目

我是新角度和想要建議的最佳途徑實現像this。這jsFiddle不起作用，但這是主意。角度js嵌套控制器列表/項目

我希望沿着頂部的選項卡可供選擇的項目。當您選擇該項目時，數據填充如下。

我想要一個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>

我真的想保持控制器分離和邏輯分離。

來源

2013-05-08 dre

jsfiddle似乎根據您的描述完全正常工作。你能解釋一下哪些是不是更詳細的工作？ – 2013-05-23 10:14:15

你使用什麼瀏覽器？ – 2013-05-23 13:26:51

這很有趣，這個問題完全符合我的觀點，問題實際上是很好的答案：p – roland 2013-07-27 09:50:16

我創造了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++; 
    }; 
}]);

來源

2013-08-06 21:30:21 jdstein1

角度js嵌套控制器列表/項目

回答

相關問題