使用angularjs和bootstrap创建动态图库 [英] Creating dynamic image gallery using angularjs and bootstrap
问题描述
如何创建动态图库以使用angularjs和bootstrap显示缩略图，其中图像将在加载时动态添加。它也应该适用于手机，台式机和平板电脑。
How do I create a dynamic image gallery to show thumbnails using angularjs and bootstrap where images will be dynamically added on load. Also it should fit in mobiles, desktops and tablets.
推荐答案
首先确保 jQuery 和 AngularJS 都是通过脚本标签加载的。首先必须加载jQuery，因为Angular使用jQuery。
First make sure jQuery and AngularJS are both loaded through script tags. jQuery must be loaded first because Angular uses jQuery.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
要在HTML视图中使用Angular代码，您需要使用<$ c $引导应用程序c> ng-app 指令。设置它的值等于您在JavaScript文件中声明的值。您可以将此指令放在任何您喜欢的位置，但最佳位置是 html 或正文标记。
To use Angular code in your HTML views, you need to bootstrap your application with the ng-app directive. Set it's value equal to what you declared in your JavaScript file. You can place this directive anywhere you like, but the best places are either the html or body tags.
您的控制器将范围与您的视图连接起来。您需要使用 ng-controller 指令才能使用此范围。
Your controllers are what connects the scope with your view. You need to use the ng-controller directive in order to use this scope.
Bootstrap使用网格系统。你想在你的容器里面嵌入一个div row 的div，并在另一个占据3/4屏幕的类中平板电脑和台式机以及移动设备上的全宽。
Bootstrap uses the grid system. You want to nest a div with class row inside your container and inside another class taking up 3/4 of the screen on tablets and desktops and the full-width on mobile devices.
为了使图像响应，bootstrap有一个 img-responsive 上课。使用angular，您可以拥有一组图像数据，并使用 ng-repeat 迭代每个图像。我认为最好的方法是通过哈希。
To make images responsive, bootstrap has an img-responsive class. Using angular, you can have an array of image data, and use ng-repeat to iterate over each image. I think the best way to do this would be through a hash.
<html ng-app="myApp">
<body ng-controller="myCtrl">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-12">
<img class="img-responsive" ng-repeat="image in images" ng-src="image.src" alt="{{image.alt}}" />
</div>
</div>
</div>
</body>
</html>
JavaScript
JavaScript
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.images = [
{ "src": "image1.png", "alt": "First Image" },
{ "src": "image2.png", "alt": "Second image" },
{ "src": "image3.png", "alt": "Third image" },
{ "src": "image4.png", "alt": "Fourth image" }
];
}]);
希望这会有所帮助。
这篇关于使用angularjs和bootstrap创建动态图库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
