1. 程式人生 > >ionic+anjularjs點選圖片放大

ionic+anjularjs點選圖片放大

html程式碼

<ion-content>
      <div style="width: 100%">
          <img ng-src="{{vm.file}}" ng-click="showBigImage()"/>
      </div>
      <div ng-if="bigImage" ng-click="hideBigImage()">
          <img ng-src="{{vm.file}}" style="height: 100%;width: 100%;"/>
      </div
>
</ion-content>

js程式碼

      var vm = this;
      vm.file = $stateParams.src;//這裡圖片路徑為上個頁面傳過來的引數

      $scope.bigImage = false;//初始不顯示大圖
      $scope.hideBigImage = function () {
          $scope.bigImage = false;//隱藏大圖
      };
      //點選圖片放大
      $scope.showBigImage = function () {
          $scope
.bigImage = true; };