8

一連のモジュールが同時に表示されるダッシュボード アプリケーションに取り組んでいます。これらのモジュールに複数の「ビュー」を追加したいと思います。たとえば、Github モジュールの最初のビューはリポジトリのリストです。そのモジュールのリポジトリ リンクをクリックすると、モジュールのそのビューは、そのリポジトリに関するすべての詳細情報を表示する新しい画面に置き換えられます。

ただし、このビューをこのモジュールで分離して、他のモジュールを同時に使用し続けることができるようにしたい (ページをまったく切り替えたくない)。

私が達成しようとしているものの例は、ここにあります: http://jsfiddle.net/5LgCZ/

この例では、果物または車をクリックすると、そのモジュール内のその項目に関する詳細情報が新しいビューに表示されます。(現在はアラートを実行するだけです)。

これは私がこれまでに持っているものですが、コントローラーとビューに関する限り、これを構造化してアプローチする方法がわかりません:

<div ng-app="app">
    <div class="module" ng-controller="FruitCtrl">
        <h1>Fruit Module</h1>
        <ul>
            <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li>
        </ul>
    </div>
    <div class="module" ng-controller="CarCtrl">
        <h1>Car Module</h1>
        <ul>
            <li ng-repeat="car in cars"><a href="#" ng-click="showDetail(car)">{{car}}</a></li>
        </ul>
    </div>
</div>

助けていただける方、よろしくお願いします。

4

2 に答える 2

0

a が何を意味するのか完全new viewにはわかりませんが、これを行うにはおそらくいくつかの方法がありますが、(私の意見では) 最も簡単な方法の 1 つから始めるために、モジュールごとに詳細要素を設定できます。選択に基づいて表示/非表示:

<div class="module" ng-controller="FruitCtrl">
    <h1>Fruit Module</h1>
    <ul ng-show='!fruitSelected'>
        <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li>
    </ul>
    <div class="details" ng-show="fruitSelected">{{fruitSelected}}</div>
</div>

function FruitCtrl($scope) {
    $scope.fruits = ['Banana', 'Orange', 'Apple'];
    $scope.fruitSelected = false;
    $scope.showDetail = function (fruit) {
        $scope.fruitSelected = fruit;
    }
}
于 2013-05-20T14:29:29.103 に答える