我是 AngularJS 的新手，我一直无法找到在两个不同的 HTML 部分中加载的列表和 GridView 切换按钮的具体教程。阅读官方ng-include、ng-switch官方文档，搜索SO。不幸的是，我们不想使用 UI-router .
加载两个部分(list.html 和 grid.html)是否是正确的 Angular 编码方式？
我找到的最相关的帮助是:
1.http://tutorialzine.com/2013/08/learn-angularjs-5-examples(示例 5)
对示例 #5 有一个有见地的评论:
Nice simple examples - well done. The last example that switches between grid and list views is not very efficient since it creates both options and the shows/hides one. A simpler/better approach would be using a single ul with repeater and ng-switch and then enabling the alternate list elements using ng-switch-case. - Johan
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";
};
});
最佳答案
您应该定义应用程序 Controller 的范围属性，该属性将保存 ng-include 模板的 URL，并将此属性绑定(bind)到指令的范围。确保在指令中使用隔离范围，以避免在修改指令范围时产生副作用。这是一个这样做的例子(见代码中的注释):
JavaScript
angular.module('app', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/main', {
controller: 'appController',
templateUrl: 'main.html'
})
.otherwise({
redirectTo: '/main'
});
}])
.controller('appController', ['$scope', function($scope) {
$scope.view = 'list.html'; // <- default template used for ng-include
$scope.data = [{
text: '1'
}, {
text: '2'
}, {
text: '3'
}, {
text: '4'
}, {
text: '5'
}, {
text: '6'
}];
}])
.directive('appView', function() {
return {
scope: {
// link view property of directive's scope to some property
// in the parent scope (scope of appController) specified in
// app-view attribute of root element of directive
view: '=appView'
},
replace: true,
template:
'<nav class="navbar navbar-default">' +
'<div class="container">' +
'<ul class="nav navbar-nav navbar-right">' +
'<li ng-repeat="v in views" ng-bind="v.name" ' +
'ng-class="v.icon" ng-click="switchView(v)"></li>' +
'</ul>' +
'</div>' +
'</nav>',
link: function(scope, el, attr) {
scope.views = [{
name: 'List',
template: 'list.html',
icon: 'btn btn-default navbar-btn glyphicon glyphicon-th-list'
}, {
name: 'Grid',
template: 'grid.html',
icon: 'btn btn-default navbar-btn glyphicon glyphicon-th'
}];
},
controller: ['$scope', function($scope) {
$scope.switchView = function(view) {
$scope.view = view.template; // <- modify parent scope view
}
}]
}
});
应用程序主页(index.html)
<html ng-app="app">
...
<body ng-view=""></body>
</html>
路线模板(main.html)
<header app-view="view"></header>
<section ng-include="view"></section>
ListView 模板 (list.html)
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 panel panel-default" ng-repeat="item in data">
<div class="panel-body">{{item.text}}</div>
</div>
</div>
</div>
GridView 模板 (grid.html)
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 panel panel-default" ng-repeat="item in data">
<div class="panel-body">{{item.text}}</div>
</div>
</div>
</div>
笨蛋:http://plnkr.co/edit/uWw7NuPG0I161mHXZg2r?p=preview
奖励:网格是响应式的，只需稍微调整一下窗口大小
另一种选择:
您可能已经注意到，grid.html 和 list.html 非常相似，因此如果您只有这两个选项，您可能会决定不使用 ng-include 完全具有单独的可切换 View ，但将内容 View 直接放入路由模板中，只需使用 ng-class 指令切换面板中使用的类，该指令可以在 View 出现时切换类改变了。
路线模板(main.html)
<header app-view="view"></header>
<section>
<div class="container">
<div class="row">
<div ng-class="{'col-md-4': view === 'grid.html',
'col-md-12': view === 'list.html',
'panel':true, 'panel-default':true}"
ng-repeat="item in data">
<div class="panel-body">{{item.text}}</div>
</div>
</div>
</div>
</section>
关于javascript - 如何制作在 AngularJS 中加载部分的列表和 GridView 切换开关控件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22448143/