他のサムネイルから選択して背景画像を変更する - イオニック

Question

別の画像サムネイルをクリックすると、背景画像を変更する必要があります。

現在、Ionic v1とangular jを使用しています。

これはどこから始めるのか分かりません。私は開発が初めてで、これは私にとって非常に魅力的です。

サムネイルは水平スクロールの内側に表示され、背景はこのスクロールの上部にとどまります。

誰かがこの問題や解決策を持っている場合は、助けてください。

これは、バックグラウンドのための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

あなたは

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'; 
 
    }; 
 
});

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

<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>

Answer 2

を変更する必要があるイメージを持つボタンですが、私がapapを構築すると、何らかの理由で画像が表示されません。

背景本部：

<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で、何もない...