1

JSON データから取得したコンテンツのテーブルを表示するタブがいくつかあります。タブが機能し、テーブルの列を並べ替えています。これまでのところすべて順調です。ただし、達成したい2つのこと：

  1. ページの読み込み時に、デフォルトで最初のタブ パネルを表示したいと考えています。
  2. アクティブなタブ リンクに「アクティブ」のクラスを追加したいと思います。

私が持っているコードは、このフィドルで見ることができます: http://jsfiddle.net/9hZx5/5/、また次のように:

HTML:

<div ng-app="myApp">
    <div class="tabs">
        <a href="" title="" class="tab selected" rel="tab1" ng:click="selected=1">Purchases</a>
        <a href="" title="" class="tab" rel="tab2" ng:click="selected=2">Products on sale</a>
        <a href="" title="" class="tab" rel="tab3" ng:click="selected=3">Last 30 days sales</a>
    </div>
    <div id="tab1" class="tabContent selected" ng-controller="PurchasesCtrl" ng:show="selected == 1">
        <h2>Purchases:</h2>
        <table cellspacing="0">
            <tr class="first">
                <th class="first">Date</th>
                <th>Description</th>
            </tr>
            <tr ng-repeat="purchase in purchases.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
                <td class="first">{{purchase.date}}</td>
                <td>{{purchase.text}}</td>
            </tr>
        </table>
    </div>


    <div id="tab2" class="tabContent selected" ng-controller="SaleProductsCtrl" ng:show="selected == 2">
        <h2>Sale products:</h2>                         
        <table cellspacing="0">
            <tr class="first">
                <th class="first">Date</th>
                <th>Description</th>
            </tr>
            <tr ng-repeat="saleProduct in saleProducts.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
                <td class="first">{{saleProduct.date}}</td>
                <td>{{saleProduct.text}}</td>
            </tr>
        </table>
    </div>


    <div id="tab3" class="tabContent selected" ng-controller="Sale30DaysCtrl" ng:show="selected == 3">
        <h2>Sale 30 days:</h2>
        <table cellspacing="0">
            <tr class="first">
                <th class="first">Date</th>
                <th>Description</th>
            </tr>
            <tr ng-repeat="sale30Day in sale30Days.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
                <td class="first">{{sale30Day.date}}</td>
                <td>{{sale30Day.text}}</td>
            </tr>
        </table>
    </div>
</div>

JS:

var myApp = angular.module("myApp",[]);

myApp.factory("Purchases", function(){
    var Purchases = {};
    Purchases.data = [
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        }
    ];
    return Purchases;
});

function PurchasesCtrl($scope, Purchases){
    $scope.purchases = Purchases;   
}




myApp.factory("SaleProducts", function(){
    var SaleProducts = {};
    SaleProducts.data = [
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        }
    ];
    return SaleProducts;
});

function SaleProductsCtrl($scope, SaleProducts){
    $scope.saleProducts = SaleProducts;   
}




myApp.factory("Sale30Days", function(){
    var Sale30Days = {};
    Sale30Days.data = [
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        }
    ];
    return Sale30Days;
});

function Sale30DaysCtrl($scope, Sale30Days){
    $scope.sale30Days = Sale30Days;   
}

タブ リンクのコントローラーを定義する必要があるかどうか (それを試したところ、タブ移動が完全に壊れているように見えました!)、または各タブ パネルのコントローラーを使用する際にこれについて少し間違って行ったかどうかはわかりません。セクション全体に 1 つのマスター コントローラーが必要です。

私はAngularのまったくの初心者であり、自分の道を見つけようとしているので、どんな助けも本当に感謝しています。

ありがとう皆さん...

4

1 に答える 1

9 
<div class="tabs">
    <a href="" title="" class="tab selected" rel="tab1" ng:click="selected=1">Purchases</a>
    <a href="" title="" class="tab" rel="tab2" ng:click="selected=2">Products on sale</a>
    <a href="" title="" class="tab" rel="tab3" ng:click="selected=3">Last 30 days sales</a>
</div>

置換先: 

   <div class="tabs" ng-init="selected=1">
            <a href="" title="" class="tab selected" rel="tab1" ng:click="selected=1" ng:class="{'active' : selected==1 }">Purchases</a>
            <a href="" title="" class="tab" rel="tab2" ng:click="selected=2" ng:class="{'active' : selected==2 }">Products on sale</a>
            <a href="" title="" class="tab" rel="tab3" ng:click="selected=3" ng:class="{'active' : selected==3 }">Last 30 days sales</a>
        </div>

ここでデモを見る

于 2013-09-16T09:27:36.600 に答える