AngularJS：ng-repeat 结合 JQuery

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 文件中写的内容（lightDialog1、lightDialog2 等） .

有人会知道这个问题吗？或者是否有更好的方法来处理这种情况，例如不使用 JQuery？

谢谢 =)

编辑：这是我的函数LightDialog的代码：

function showLightDialog(selectedDialog) {
    $(selectedDialog).removeClass('dialog-hidden').addClass('dialog-shown');
    $('.hide-website').removeClass('dialog-hidden').addClass('dialog-shown');
}

基本上，它只添加能够显示或隐藏 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 之上执行类似 with 的操作，但由于您的示例中没有 id，我使用了 title。