在頁面上顯示了幾張圖片後，因為是手機端，圖片會有點小的感覺，就想著怎麼樣才能讓使用者點選小圖片看到大圖呢，專案中ionic結合angularjs實現了這個功能

1.首先是三張小圖上應新增一個函式，當點選圖片時觸發大圖，程式碼如下：

HTML：

<div class="row padding">
    <div class="col"
         style="width: 100px;height: 100px;padding:3px;-webkit-box-shadow: 0 0 10px rgb(153,134,117);-moz-box-shadow:0 0 10px rgb(153,134,117);box-shadow:0 0 10px rgb(153,134,117);border-radius: 3px;margin: -1px 0 0 -1px;text-align: center">
        <img class="img-responsive" style="height: 100%; border:1px solid #ffffff;"
             ng-src="{{imgUrl+shop.Images[0]}}" ng-click="shouBigImage('{{imgUrl+shop.Images[0]}}')">
    </div>
       
    <div class="col"
         style="width: 100px;height: 100px;padding:3px;-webkit-box-shadow: 0 0 10px rgb(153,134,117);-moz-box-shadow:0 0 10px rgb(153,134,117);box-shadow:0 0 10px rgb(153,134,117);border-radius: 3px;margin: -1px 0 0 -1px;text-align: center">
        <!--ng-click="shouBigImage('{{imgUrl+shop.Images[1]}}')"這裡傳的Url是從服務裡呼叫的，可以傳本地的-->
        <img class="img-responsive" style="height: 100%; border:1px solid #ffffff;"
             ng-src="{{imgUrl+shop.Images[1]}}" ng-click="shouBigImage('{{imgUrl+shop.Images[1]}}')">
    </div>
       
    <div class="col"
         style="width: 100px;height: 100px;padding:3px;-webkit-box-shadow: 0 0 10px rgb(153,134,117);-moz-box-shadow:0 0 10px rgb(153,134,117);box-shadow:0 0 10px rgb(153,134,117);border-radius: 3px;margin: -1px 0 0 -1px;text-align: center">
        <img class="img-responsive" style="height: 100%; border:1px solid #ffffff;"
             ng-src="{{imgUrl+shop.Images[2]}}" ng-click="shouBigImage('{{imgUrl+shop.Images[2]}}')">
    </div>
</div>
 

js:

//點選圖片放大
$scope.shouBigImage = function (imageName) {  //傳遞一個引數（圖片的URl）
    $scope.Url = imageName;                   //$scope定義一個變數Url，這裡會在大圖出現後再次點選隱藏大圖使用
    $scope.bigImage = true;                   //顯示大圖
};

2.定義一個div，用來顯示大圖的程式碼如下：

HTML：

<div id="rightDisplay" ng-if="bigImage" class="popover-backdrop"
     style="position: fixed;top: 0;left: 0;z-index: 10; width: 100%;height: 100%;"
     ng-click="hideBigImage()">
    <img class="img-responsive"
         style="position: absolute;top: 10%;left: 50%;z-index: 10;display: block;margin-top: 18px;
         margin-left: -165px;height: 420px;width: 330px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);"
         src="{{Url}}"/>
</div>
 

js:

$scope.bigImage = false;    //初始預設大圖是隱藏的
$scope.hideBigImage = function () {
    $scope.bigImage = false;
};

3.效果圖如下：

小圖：

大圖：