web-dev-qa-db-ja.com

画像のsrcをng-modelにバインドしてAngularで抽出する方法は？

画像のソースを別の画像のソースにバインドしたい。

visual example

最終結果では、大きな画像のソースは、クリックされた小さな（サムネイル）画像のsrcにバインドされます。これはng-modelを使用して可能ですか？

ここに私が持っているものがあります

        <div>
            <img ng-src="{{selectedImg.src}}">
        </div>

        <div>
            <ul ng-repeat="thumb in franchises">
                <li>
                    <img ng-src="{{thumb.images[0].list}}" ng-model="selectedImg">
                </li>
            </ul>
        </div>
angularjsimageangular-ngmodel
7
RobSeg

Ng-clickを使用してそれを行うことができます：

<div>
    <img ng-src="{{selectedImg.src}}" alt="{{slide.images[0].list}}">
</div>

<div>
    <ul ng-repeat="thumb in franchises">
        <li>
            <img ng-src="{{thumb.images[0].list}}" 
                 alt="{{thumb.images[0].list}}" 
                 ng-click="selectedImg.src = thumb.images[0].list" />
        </li>
    </ul>
</div>

しかし、次のように、コントローラのオブジェクトとしてselectedImgを定義する必要があります。

$scope.selectedImg = {};
11
Saulo Lozano

Angular Docsによると、あなたの質問に答えるには、ng-modelまたはカスタムフォームコントロールを使用して、入力、select、およびtextareasのみをバインドできます。

あなたがおそらくやりたいのはこれです：（これはSaulo Lozanoがng-clickでやったことです）

https://jsfiddle.net/4fz4nx1k/2/

<img ng-src="{{thumb.images[0].list}}" ng-click="selectedImg.src = thumb.images[0].list" >

そのため、imgをng-modelと実際にバインドすることはできません。さらに、ng-repeatの内部にng-modelを配置できた場合、ng-repeatコレクションのすべての繰り返し値で同じ「モデル値」が取得されます。

4
cyber ice