如何使这个 AngularJs 画廊工作 .

How to make this AngularJs Gallery Work ?

本文关键字：工作 AngularJs 何使这      更新时间：2023-09-26

我目前正在积累AngularJS的知识。但是，我在 Plunker 中运行一些代码时遇到了一些问题。

有人可以看看这段代码并告诉我我做错了什么吗？我还在此处包含代码。

var app = angular.module('plunker', [])
.controller('AlbumCtrl', function($scope) {
  $scope.images = [
    {category : 'High', image : 'http://lorempixel.com/g/850/400', description : 'Random Photo', stars : '4/5'},
    {category : 'Medium', image : 'http://lorempixel.com/g/850/400/sports', description : 'Sports Photo', stars : '3/5'},
    {category : 'Medium', image : 'http://lorempixel.com/g/850/400/animals', description : 'Animal Photo', stars : '3/5'},
    {category : 'High', image : 'http://lorempixel.com/g/850/400/abstract', description : 'Abstract Photo', stars : '5/5'},
    {category : 'Low', image : 'http://lorempixel.com/g/850/400/business', description : 'Business Photo', stars : '1/5'},
    {category : 'High', image : 'http://lorempixel.com/g/850/400/cats', description : 'Cat Photo', stars : '4/5'},
    {category : 'Medium', image : 'http://lorempixel.com/g/850/400/city', description : 'City Photo', stars : '3/5'},
    {category : 'Low', image : 'http://lorempixel.com/g/850/400/fashion', description : 'Fashion Photo', stars : '2/5'},
    {category : 'High', image : 'http://lorempixel.com/g/850/400/nature', description : 'Nature Photo', stars : '5/5'}
  ];
  
  $scope.currentImage = _.first($scope.images);
  
  $scope.imageCategories = _.uniq(_.pluck($scope.images, 'category'));
    
  $scope.setCurrentImage = function(image) {
    $scope.currentImage = image;
  };
});
body { padding-top: 3.2rem; }
h2 {
  margin-bottom: 1.2rem;
  float: left;
  padding-left: .8rem;
}
.albumImage img { margin-bottom: .4rem; }
.angLogo {
  float: left;
  width: 34px;
  padding-top: 1.9rem;
}
.badge .glyphicon { padding-right: .4rem; }
label, select {
  float: right;
  margin-left: 1rem;
}
.wrapper {
    list-style: none;
    height: 480px;
    margin-left: 5.6rem;
    overflow-y: auto;
  }
  
  img {
    width: 140px;
    margin-bottom: 1rem;
    cursor: pointer;
    display: block;
    border: 2px solid #fff;
  }
  
  .hover {
      box-shadow: 0px 1px 4px #444;
      transition: all .2s ease-in-out;
      border-color: #fff;
    }
    
    .active {
      opacity: .74;
      box-shadow: 0px 1px 8px #666;
    }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>
<body ng-app="myApp">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div ng-controller="AlbumCtrl">
        <img src="//www.nganimate.org/img/angular-logo.png" alt="AngularJS Logo" class="angLogo"/>
          <div class="row">
            <div class="col-md-9">
              <div class="albumImage">
                <img ng-src="{{currentImage.image}}" alt="{{currentImage.description}}"/>
              </div>
              <h3>{{currentImage.description}}</h3>
              <p class="badge"><span class="glyphicon glyphicon-star"></span>{{currentImage.stars}}</p>
              <select ng-model="categories"
                      ng-options="category for category in imageCategories">
                <option value="">All</option>
              </select>
              <label for="select">Select a Rating:</label>
            </div><!-- End of Column -->
            <div class="col-md-3">
              <div class="wrapper">
                <ul class="list">
                  <li ng-repeat="image in images | filter:categories" ng-click="setCurrentImage(image)">
                    <img ng-src="{{image.image}}" alt="{{image.description}}"/>
                  </li>
                </ul><!-- End of List -->
              </div><!-- End of Wrapper -->
            </div><!-- End of Column -->
          </div><!-- End of Row -->
        </div><!-- End of Album Controller -->
      </div><!-- End of Column -->
    </div><!-- End of Row -->
  </div><!-- End of Container -->
</body><!-- End of Body -->
</html>

http://plnkr.co/edit/6KcKvxHR9mZitFL6eidX?p=preview

运行代码后，我还想进行修改，以便有一个箭头选择器来滚动图像并更改主图像。我还想在主图像上添加一个缩放图标，然后它移动到全屏 - 如果需要，我将创建一个单独的问题。

对此的任何帮助将不胜感激。

看起来您使用了下划线 js 函数，但您尚未包含库，因此一旦包含库，代码就会起作用。您可以在头标签中添加此行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

根据你想要的，我创建了一个小提琴。

http://plnkr.co/edit/OmYPG94kw5lOmDf6X1h4?p=preview

CSS 是在您共享的链接中使用 SCSS 预处理器编写的，但我不确定 plunkr 是否支持 SCSS，所以我将其转换为纯 css，现在一切正常。

相关文章：