Question

我正在使用Ionic和Angular。我重复一遍，如下所示。它输出一个主（大）图像，以及它下面的多个额外（较小）图像。

<md-select ng-model="ctrl.options" class="md-table-select ng-pristine ng-untouched ng-valid ng-empty" md-container-class="md-table-select" tabindex="0" aria-disabled="false" role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_8" aria-owns="select_container_9" aria-invalid="false" aria-label="&nbsp;Options"><md-select-value class="md-select-value md-select-placeholder" id="select_value_label_1"><span>&nbsp;Options</span><span class="md-select-icon" aria-hidden="true"></span></md-select-value><div class="md-select-menu-container md-table-select" aria-hidden="true" id="select_container_9"><md-select-menu><md-content>
                            <md-option class="option md-ink-ripple" ng-click="$ctrl.onClick(result,'')" tabindex="0" role="option" aria-selected="false" id="select_option_2"><div class="md-text">Hold for Decision</div></md-option>
                            <md-option ng-click="$ctrl.onClick(result,'')" tabindex="0" role="option" class="md-ink-ripple" aria-selected="false" id="select_option_3"><div class="md-text">Deliver</div></md-option>
                            <md-optgroup label="Disposal"><label class="md-container-ignore">Disposal</label>
                                    <md-option ng-click="$ctrl.onClick(result,'Disposal')" tabindex="0" role="option" class="md-ink-ripple" aria-selected="false" id="select_option_4"><div class="md-text">Partial</div></md-option>
                                    <md-option ng-click="$ctrl.onClick(result,'Disposal')" tabindex="0" role="option" class="md-ink-ripple" aria-selected="false" id="select_option_5"><div class="md-text">Full</div></md-option>
                                </md-optgroup>
                                <md-optgroup label="Return"><label class="md-container-ignore">Return</label>
                                    <md-option ng-click="$ctrl.onClick(result,'Return')" tabindex="0" role="option" class="md-ink-ripple" aria-selected="false" id="select_option_6"><div class="md-text">Partial</div></md-option>
                                    <md-option ng-click="$ctrl.onClick(result,'Return')" tabindex="0" role="option" class="md-ink-ripple" aria-selected="false" id="select_option_7"><div class="md-text">Full</div></md-option>
                                </md-optgroup>
                                </md-content></md-select-menu></div></md-select>

这样可以拉出并创建多个图块：

我希望能够点击较低的（较小的照片）来替换顶部的图像，以及＃34;滚动它们＆＃34;。

如何使用Angular实现此目的，更新$ scope.newImage只是替换所有图像。我怎样才能将主图像替换为它下方较小图像的上方？

感谢任何帮助。干杯

Answer 1

尝试添加新属性：＆＃34; $ scope.selectedImage＆＃34;和一个允许您选择图像的功能（setSelectedImage）。所以：

改变这个：

 <img src="{{ newImage || text.image[0].imageurl }}" class="full-image">

使用：

  <img src="{{ newImage || selectedImage.imageurl }}" class="full-image">

并在此处添加ng-click：

<div class="item item-avatar">
    <img src="{{data.imageurl}}" class="miniImage" ng-click="setSelectedImage(data)">
</div>

在您的控制器中：

$scope.selectedImage;

$scope.setSelectedImage(data){
    // Always one image is selected
    $scope.selectedImage = data;
}

在上下文中更改{{bind}}上的ng-src

1 个答案: