11

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

コントローラーとロジックを分けておきたいと思います。

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 に答える