我是 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/
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack
在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解