ng-使用 angular-isotope 在单个元素上重复多个值对

Question

我正在使用 angular-isotope 插件在砌体网格中重复多个引号。我的目标是为每个引用添加多个唯一标签，每个标签都有自己唯一的过滤器 class，这样当您单击标签时，只会显示来自该过滤器的标签。目前，该功能只需要一个标签就可以正常工作：

HTML:

<div class="quotes js-masonry" isotope-container="isotope-container">

<div class="quote-col {{item.class}}"  ng-repeat="item in quotes" isotope-item="isotope-item">
    <div class="quote-single">
        <div class="quote-quote">"{{item.quote}}"</div>
        <div class="quote-author">
            <a class="filter-click" data-filter="{{item.dataFilter}}">- {{item.author}}</a>
        </div>
        <div class="quote-bottom clearfix">
            <span class="quote-share">
                <a href="#"><img src="img/icons/facebook.png"></a>
                <a href="#"><img src="img/icons/twitter.png"></a>
            </span> 
            <span class="quote-tags" ng-repeat="?">
                <a class="filter-click" data-filter="{{item.tagFilter}}">{{item.tag}}</a>
            </span>
        </div>
    </div>

</div>

Angular 控制器：

var demo = angular.module('angular-isotope-demo', []);

demo.controller('QuoteController', function QuoteController($scope) {
$scope.quotes = [
    {
        "quote":"It is better to lead from behind and to put others in front, especially when you celebrate victory when nice things occur. You take the front line when there is danger. Then people will appreciate your leadership.", 
        "author":"Nelson Mandela", 
        "tag": [
            "Leadership",
            "Second Class"
        ],
        "class":"mandela leadership",
        "dataFilter": ".mandela",
        "tagFilter": [
            ".leadership", 
            ".second-class"
        ]
    }
]
});

我的问题是，如何重复该项目标签（即 "Leadership"、"Second Class"）并将其附加到 tagFilter 中的“.second-class”，以便它看起来像这样？:

我希望这很清楚。

Answer 1

您可能会有一个嵌套的 ng-repeat。所以把你的 quote.tag 元素变成一个数组并做这样的事情：

<div ng-repeat="tag in item.tags">
  <a class="filter-click" data-filter="{{tag.filter}}">{{tag.tag}}</a>
  {{ $last ? '' : ( $index < item.tags.length-2 ) ? ', ' : '' }}
</div>

如果你希望每个项目有不同的类，那么我会在 item.tags 中有另一个元素，比如 item.tags.classes 然后这样做：

<a class="filter-click" ng-class="tag.classes" data-filter="{{tag.filter}}">{{tag.tag}}</a>

您的数据需要重组才能正常工作：

{
    "quote":"It is better to lead from behind and to put others in front, especially when you celebrate victory when nice things occur. You take the front line when there is danger. Then people will appreciate your leadership.", 
    "author":"Nelson Mandela",
    "tags": [
        {
          "tag":"Leadership",
          "filter":".leadership",
          "classes": "second-class"
        }
    ],
    "class":"mandela leadership",
    "dataFilter": ".mandela",
}

ng-使用 angular-isotope 在单个元素上重复多个值对

ng-repeat multiple value pairs on single element using angular-isotope

jquery-isotope

angularjs

angularjs-ng-repeat