Question

如何创建动态图库以使用angularjs和bootstrap显示缩略图，其中图像将在加载时动态添加。它也适用于手机，台式机和平板电脑。

Answer 1

首先确保jQuery和AngularJS都通过script标记加载。首先必须加载jQuery，因为Angular使用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代码，您需要使用ng-app指令引导应用程序。设置它的值等于您在JavaScript文件中声明的值。您可以将此指令放在任何您喜欢的位置，但最佳位置可以是html或body标记。

您的控制器将scope与您的视图相关联。您需要使用ng-controller指令才能使用此范围。

Bootstrap使用网格系统。您希望在row内嵌入一个带有container类的div，并在另一个类中嵌入占用平板电脑和台式机屏幕的3/4以及移动设备上的全宽屏幕。

为了使图像响应，bootstrap有一个img-responsive类。使用angular，您可以拥有一组图像数据，并使用ng-repeat迭代每个图像。我认为最好的方法是通过哈希。

<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

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" }
        ];
    }]);

希望这有帮助。

Answer 2

Try this codepen

使用AngularJS，css和html，您可以轻松完成。

HTML

db.collection.aggregate([
  {$unwind: "$values"},
  {$group: {_id: {name: "$name", val: "$values"},
            count: {$sum: 1}}
  }, 
  {$group: {_id: "$_id.name",
            values: {$push: {val: "$_id.val", count: "$count"}}}
  }
])

AngularJS

{ "_id" : "Bar", "values" : [ { "val" : "BAZ", "count" : 1 }, { "val" : "BAR", "count" : 2 } ] }
{ "_id" : "Foo", "values" : [ { "val" : "FOO", "count" : 2 }, { "val" : "BAR", "count" : 1 } ] }
{ "_id" : "Baz", "values" : [ { "val" : "BAZ", "count" : 3 } ] }

使用angularjs和bootstrap创建动态图库

2 个答案: