私はAngularJSを初めて使用し、2つの異なるHTMLパーシャルにロードされるリストとグリッドビューのトグルスイッチボタンの特定のチュートリアルを見つけることができませんでした. ng-include公式、公式ドキュメントを読み、 ng-switchSOを検索しました。残念ながら、 UI-routerは使用したくありません。
2 つのパーシャル (list.htmlおよびgrid.html) でロードすることは、これをコーディングする正しい Angular の方法ですか?
私が見つけた最も関連性の高いヘルプは次のとおりです。
1.http://tutorialzine.com/2013/08/learn-angularjs-5-examples (例 #5)
例 #5 には洞察に満ちたコメントがありました。
素敵な簡単な例 - よくできました。グリッド ビューとリスト ビューを切り替える最後の例は、オプションと表示/非表示の両方を作成するため、あまり効率的ではありません。よりシンプルで優れたアプローチは、リピーターと ng-switch で単一の ul を使用し、ng-switch-case を使用して代替リスト要素を有効にすることです。-ヨハン
2.http://www.adobe.com/devnet/html5/articles/getting-started-with-angularjs.html
3. https://stackoverflow.com/questions/12577378/create-a-single-html-view-for-multiple-partial-views-in-angularjs/12584774#12584774
4.https://stackoverflow.com/questions/15974086/conditional-ng-include-in-angularjs
私のHTMLコード：
<div class="col-xs-6" ng-controller="ToggleDisplayCtrl">
<div class="btn-group select-format-container" ng-switch on="selected">
<button ng-switch-when="true" ng-click="toggleGrid()" type="button"
class="btn btn-primary" ng-model="formatChoice" ng-disabled="">grid</button>
<button ng-switch-when="false" ng-click="toggleList()" type="button"
class="btn btn-primary" ng-model="formatChoice" ng-disabled="">list</button>
</div>
<div ng-include src="formatChoice.url" scope="" onload=""></div>
</div>
<!-- col-xs-6 END ToggleDisplayCtrl-->
私のJSコード：
'use strict';
var app = angular.module('tempApp');
app.controller('ToggleDisplayCtrl', function($scope) {
$scope.formatChoices = [{
name: 'grid',
url: 'partials/grid.html'
},
{
name: 'list',
url: 'partials/list.html'
}
];
$scope.selected = true;
$scope.toggleGrid = function() {
if (selected) {
return "partials/grid.html";
}
return "main.html";
};
$scope.toggleList = function() {
if (selected) {
return "partials/list.html";
}
return "main.html";
};
});