1

私は AngularJs を学習しようとしていますが、データ バインディングを介して入力されるタブ付きペインを作成する正しいアプローチについては不明です。

具体的には、3 つの異なる JSON ファイルからデータを取得する 3 つの HTML テーブルがあります。これを表示するコードはうまく機能します:

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"
        }
    ];
    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"
        }
    ];
    return Sale30Days;
});

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

HTML:

<div ng-app="myApp">
    <div class="tabs">
        <a href="" title="" class="tab selected" rel="tab1">Tab 1</a>
        <a href="" title="" class="tab" rel="tab2">Tab 2</a>
        <a href="" title="" class="tab" rel="tab3">Tab 3</a>
    </div>
    <div id="tab1" class="tabContent selected" ng-controller="PurchasesCtrl">
        <h2>Tab content 1:</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">
        <h2>Tab content 2:</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">
        <h2>Tab content 3:</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>

ここにフィドルがあります: http://jsfiddle.net/9hZx5/2/

ここでよくわからないのは、ページの読み込み時に 2 番目と 3 番目のタブを非表示にし、上部のリンクを使用してタブ付きのコンテンツ ペインを切り替える方法です。jQuery を使用してこれを行うと、(a) は機能せず、(b) 「Angular」の方法で実行したいので、非常に間違っているように見えました。

このフィドルhttp://jsfiddle.net/vojtajina/vM4FY/に従って、「ng:click」と「ng:show」をリンクとパネルに追加しようとしましたが、機能しません。私がこれで見つけたチュートリアル/例 (Angular Bootstrap タブ ディレクティブhttp://angular-ui.github.io/bootstrap/など) はすべて、リピーターを介してタブを動的に生成するように見えます。私のシナリオ。

誰かが私を正しい方向に向けることができるかどうか疑問に思いましたか?

どうもありがとうございました。

4

1 に答える 1

1

実際、「ng-click」および「ng-show」ディレクティブは機能しました。これは、ディスプレイを上書きし、タブ選択が機能していないように見える追加の CSS でした。解決策は、上記のタブ セレクタ リンクを次のように変更することでした。

<a href="" title="" class="tab active" 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 id="tab1" class="tabContent" ng-controller="PurchasesCtrl" ng:show="selected == 1">
    Tab content
</div>
<div id="tab2" class="tabContent" ng-controller="SaleProductsCtrl" ng:show="selected == 2">
    Tab content
</div>
<div id="tab3" class="tabContent" ng-controller="Sale30DaysCtrl" ng:show="selected == 3">
    Tab content
</div>

body {
    font: 12px arial, helvetica, sans-serif;
}
h2 {
    font-size: 16px;
}
table {
    margin: 20px 0;
    border-collapse:collapse;
}
th,td {
    border: 1px solid #ccc;
    padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<script>
    	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",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        }
	    ];
	    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",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        }
	    ];
	    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",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        }
	    ];
	    return Sale30Days;
	});

	function Sale30DaysCtrl($scope, Sale30Days){
	    $scope.sale30Days = Sale30Days;   
	}
</script>

<div ng-app="myApp">
	<div class="tabs">
		<a href="" title="" class="tab active" 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" ng-controller="PurchasesCtrl" ng:show="selected == 1">
        <h2>Purchases:</h2>
		<table cellspacing="0">
			<tr class="first">
				<th class="first">Date</th>
				<th>Description</th>
				<th>Amount</th>
				<th>Status</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>
				<td>{{purchase.price}}</td>
				<td>{{purchase.availability}}</td>
			</tr>
        </table>
	</div>


	<div id="tab2" class="tabContent" 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>
				<th>Amount</th>
				<th>Status</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>
				<td>{{saleProduct.price}}</td>
				<td>{{saleProduct.availability}}</td>
			</tr>
        </table>
	</div>


	<div id="tab3" class="tabContent" 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>
				<th>Amount</th>
				<th>Status</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>
				<td>{{sale30Day.price}}</td>
				<td>{{sale30Day.availability}}</td>
			</tr>
        </table>
	</div>
</div>

于 2013-09-16T09:10:51.763 に答える