Question

单击另一个图像缩略图时，我需要更改背景图像。

目前使用Ionic v1和angular js。

不知道从哪里开始，我是开发新手，这对我来说非常诡计。

缩略图显示在水平滚动条内，背景保持在此滚动条的顶部。

如果有人遇到此问题/解决方案，请提供帮助。

这是背景的div：

<div class="col imgPerfil" style="background-image:url('img/test/test.jpg');">

这是我需要更改图片的按钮

<button class="button button-icon botscroll"> <img src="img/perfil/fotos/fotoscroll01.png" class="imgscroll" ng-model="foto1"> </button>

Answer 1

我设法让它工作，但是当我构建de apk时，由于某种原因图像没有出现。这是代码：

背景分组：

<div class="col imgPerfil" ng-style="{'background-image': 'url('+imgback+')'}">

点击图片：

<img src="img/teste/1.jpg" class="imgscroll" ng-click="changeImg1()">

JS：

$scope.imgback = '../img/teste/2.jpg'; $scope.changeImg1 = function () { $scope.imgback = '../img/teste/1.jpg'; };...

有什么不对吗？当我尝试livereload，浏览器或离子实验室时，它可以工作，但在构建apk中，没有...

Answer 2

你可以使用ng-style

＆＃13;

angular.module('test', [])
.controller('test', function ($scope) {
  $scope.image1 = 'http://www.linfield.edu/assets/images/PLACE/place-logo-sm.png';
  $scope.image2 = 'http://www.linfield.edu/assets/images/PLACE/place-logo-sm.png';
  
  $scope.setImage1 = function () {
    $scope.image1 = 'https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif';
  };
  
  $scope.setImage2 = function () {
    $scope.image2 = 'https://privacy.google.com/images/overview/shields.svg';
  };
});

＆＃13;

div div {
width: 100px; height: 100px;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}

＆＃13;

<div ng-app="test" ng-controller="test">
  <button ng-click="setImage1()">Set iamge 1</button>
  <button ng-click="setImage2()">Set iamge 2</button>
  <div ng-style="{'background-image': 'url('+image1+')'}"></div>
  <div ng-style="{'background-image': 'url('+image2+')'}"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

＆＃13;

更改背景图像，从其他缩略图中选择 - 离子

2 个答案: