Question

这是我的代码：

的index.html

<div ng-controller="WebsitesController as portfolioWebsites" class="content">
<ul class="grid cs-style-1">
    <li ng-repeat="website in portfolioWebsites.items">
        <figure>
            <img data-src="img/{{website.img}}" data-effect="fadeInUp" alt="{{website.imgAlt}}">
            <figcaption>
                <div class="figcaption-container-inside">
                    <div class="element-title">{{website.title}}</div>
                    <div class="element-description-1">{{website.description}}</div>
                    <div class="element-description-2">{{website.date}}</div>
                    <button type="button" class="btn btn-dead coming-soon lang" ng-click="showLightDialog(website.dialog)"></button>
                </div>
            </figcaption>
        </figure>
    </li>
</ul>

的script.js

app.controller('WebsitesController', function() {
this.items = websites;
}); 
var websites = [
    {
        title: "LightWolf Studios",
        description: "Our new website  Smiley smile ",
        date: 2014,
        img: "portfolio-lightwolf-studios-2014.png",
        imgAlt: "Portfolio - LightWolf Studios",
        dialog: "$('#lightDialog9')",
    },
    {
        title: "Les Zappings",
        description: "Spectacle for children",
        date: 2011,
        img: "portfolio-zappings.png",
        imgAlt: "Portfolio - Les Zappings",
        dialog: "$('#lightDialog1')",
    }
];

除了一个细节之外，一切都有效：在HTML中，在每次迭代中，onclick包含参数lightDialog9，而不是我在JS文件中写的内容（{{1} }，lightDialog1等。）

有人会对这个问题有所了解吗？或者可能是否有更好的方法来处理这种情况，例如没有JQuery？

谢谢=）

编辑：以下是我的函数lightDialog2的代码：

LightDialog

基本上，它只添加了能够显示或隐藏div的类。每个项目有一个div。它是我创建的模态系统。

Answer 1

使用Angular的正确方法是这样的：

$scope.showLightDialog = function(website) {
  $scope.dialog = website.title;
}

html代码就像：

<div class="dialog" ng-class="{dialog-shown: dialog == 'LightWolf Studios', dialog-hidden: dialog != 'LightWolf Studios'}">LightWolf Studios</div>
<div class="dialog" ng-class="{dialog-shown: dialog == 'Les Zappings', dialog-hidden: dialog != 'Les Zappings'}">Les Zappings</div>

最好在object.id之上做类似的事情，但由于你的例子中没有id，我使用了title。

AngularJS：ng-repeat与JQuery结合使用

1 个答案: