Question

我遇到了一个小问题。我正在制作一个小画廊，看到这样的HTML：

<div class="thumbnails">
    <img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/>
    <img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/>
    <img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/>
    <img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/>
    <img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt=""/>
</div><br/>

<div class="preview" align="center">
    <img name="preview" src="images/img1.jpg" alt=""/>
</div>

现在我想从json对象重复这样做所以我做了这样的事情：

    <div class="mythumbnails">
        <img ng-click="mypreview.src=img{{$index}}.src" src="data:image/png;base64,{{x}}" name="img{{$index}}" ng-repeat="x in data.gallery" alt=""/>
    </div><br/>


    <div class="mypreview" align="center">
        <img name="mypreview" src="data:image/png;base64,{{ data.gallery[0] }}" alt=""/>
    </div>

首先我做了鼠标悬停，但我无法使用{{$ index}}，所以我做了ng-mouseover和ng-click。我不知道表达是错还是什么。

预先感谢：）

@edit 问题是当我点击mypreview中的主图片时没有改变。

@ EDIT2 在Firebug：

<img class="ng-scope" ng-click="mypreview.src=img4.src" src="data:image/png;base64,..." name="img4" ng-repeat="x in data.gallery" alt="">

因此索引有效。

@ EDIT3 一开始我在控制台出错：错误：[$ parse：syntax] http://errors.angularjs.org/1.4.8/ $ parse / syntax？p0 =％7B＆amp; p1 = is％20an％20unexpected％20token＆amp; p2 = 18＆amp; p3 = mypreview。 SRC％3Dimg％7B％7B％24index％7D％7D.src＆安培; P4 =％7B％7B％24index％7D％7D.src

Answer 1

尝试替换

src="data:image/png;base64,{{ data.gallery[0] }}"

到

data-ng-src="data:image/png;base64,{{ data.gallery[0] }}"

Answer 2

如果有人有兴趣我就这样做了：

onmouseover="mypreview.src=this.src"

Angular ng-click，ng-mouseover表达式和鼠标悬停

2 个答案: