使用角同位素在单个元素上重复多个值对

Question

我使用角同位素插件在砌体网格中重复多个引号。我的目标是为每个引号添加多个唯一标记，每个标记都有自己唯一的过滤类，这样当您单击标记时，只会显示该过滤条件中的标记。目前，只需一个标签即可正常运行：

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>

角度控制器：

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"
        ]
    }
]
});

我的问题是，如何重复该项目标记（即＆＃34;领导力＆＃34;，＆＃34;第二类＆＃34;）并将其附加到＆＃34; .second-class＆＃34 ;在tagFilter中它看起来像这样？：

我希望这一点很清楚。

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",
}