11

我是 Angular 的新手，希望获得有关实现此类目标的最佳途径的建议。这个 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>

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

4

1 回答 1

4

我在 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-06T21:30:21.983 回答