我是 AngularJS 的新手，我一直无法找到加载两个不同 HTML 部分的列表和网格视图切换按钮的特定教程。阅读官方ng-include，ng-switch官方文档并搜索 SO。不幸的是，我们不想使用UI-router。
加载两个部分（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";
};
});