Question

我是angularjs的新手，也许有人可以帮助我学习。我想创建一个图像库，其中包含从一个图像切换到另一个图像的按钮。

如何使用angularjs创建图库？并包含导航栏？

Answer 1

您可以使用ng-switch和ng-switch-when指令选择可见图片。然后使用ng-click指令设置导航栏以更改您的选择。

看看这个plunk。

<强> JAVASCRIPT

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

});

<强> HTML

<body ng-controller="MainCtrl" ng-switch on="selected" ng-init="selected=1">
  <div class="slider">
    <div class="slider-content" ng-switch-when="1">
      <a href="#">
        <img width="333px" height="277px" src="http://lorempixel.com/400/200/sports" alt="" />
      </a>
    </div>
    <div class="slider-content" ng-switch-when="2">
      <a href="#">
        <img width="333px" height="277px" src="http://lorempixel.com/400/200/animals" alt="" />
      </a>
    </div>
    <div class="slider-content" ng-switch-when="3">
      <a href="#">
        <img width="333px" height="277px" src="http://lorempixel.com/400/200/nature" alt="" />
      </a>
    </div>
    <div class="slider-content" ng-switch-when="4">
      <a href="#">
        <img width="333px" height="277px" src="http://lorempixel.com/400/200/abstract" alt="" />
      </a>
    </div>
    <div class="slider-nav">
      <span class="number" ng-click="selected=1">1</span>
      <span class="number" ng-click="selected=2">2</span>
      <span class="number" ng-click="selected=3">3</span>
      <span class="number" ng-click="selected=4">4</span>
    </div>
  </div>
</body>

Angularjs如何创建图库

1 个答案: