【发布时间】：2014-04-22 06:58:57
【问题描述】：
我是 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 有一个有见地的评论：
不错的简单示例 - 做得很好。 最后一个在网格视图和列表视图之间切换的例子不是很 高效，因为它同时创建选项和显示/隐藏选项。一种 更简单/更好的方法是使用带有中继器的单个 ul 和 ng-switch，然后使用启用备用列表元素 ng-开关盒。 - 约翰
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";
};
});
【问题讨论】：
标签： javascript angularjs listview gridview angularjs-ng-include