如何制作列表和网格视图切换开关控件加载AngularJS中的部分？
Dan*_*r14 8 javascript angularjs ng-switch angularjs-ng-include
我是AngularJS的新手,我一直无法找到列表和网格视图切换开关按钮的特定教程,这些按钮加载了两个不同的HTML部分.阅读官方的ng-include,ng-switch官方的文档和搜查.不幸的是,我们不想使用UI路由器.
是加载两个部分(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. 为angularjs中的多个局部视图创建单个html视图
我的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-->
我的指令代码
'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";
};
});
您应该定义应用程序控制器的范围属性,该属性将保存模板的URL ng-include,并将此属性绑定到您的指令范围.确保在指令中使用隔离范围,以避免在修改指令范围时产生副作用.这是一个这样做的例子(参见代码中的注释):
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: {
view: '=appView' // <= 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
},
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>
列表视图模板(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>
网格视图模板(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>
Plunker:http://plnkr.co/edit/uWw7NuPG0I161mHXZg2r?p=preview
奖励:网格响应,只需播放窗口大小
另外一个选项:
您可能已经注意到grid.html并且list.html非常相似,所以如果您只有这两个选项,您可能决定不使用ng-include单独的可切换视图,而是将内容视图直接放入路径模板中,只需使用ng-class指令切换面板中使用的类可以在视图更改时切换类.
路线模板(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>