Angular js嵌套控制器列表/项目

angular js nested controllers list/item

本文关键字：项目 列表 控制器 js 嵌套 Angular      更新时间：2023-09-26

我是angular的新手，想要关于实现这样的东西的最佳途径的建议。这个jsFiddle不工作，但这是一个想法。

我想要标签沿着顶部的项目可供选择。选择项目时，将在下面填充数据。

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

我怎么能做到这一点和/或我怎么能修复小提琴或新的小提琴?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>

我真的想保持控制器和逻辑分开

我在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++;
    };
}]);
相关文章：