角度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嵌套控制器列表/项目

回答

相关问题