将具有相同值的列表元素转换为具有值的一个元素

Question

标题和我一样愚蠢:) 我不知道这是否可能，但我不得不问..我在 Angularjs 中使用带有 JSON 的 ng-repeat，我得到的是一个包含这些值的列表..

 <ul>
     <li class="name">Nokia</li>
     <li class="name">Nokia</li>
     <li class="name">Nokia</li>
     <li class="name">ZTE</li>
     <li class="name">ZTE</li>
     <li class="name">Samsung</li>
     <li class="name">Samsung</li>
     <li class="name">ZTE</li>
</ul>

所以我想从这个列表中制作类似的东西

<ul>
 <li class="name">Nokia</li>
 <li class="name">ZTE</li>
 <li class="name">Samsung</li>
</ul>

现在我不知道，我用 jQuery 尝试了一些东西但没有成功...我的问题是，这是否可能，如果可以，有什么建议吗？

好的，所以你们要求查看我的 JSON，但 @nnnnnn 已经解决了我的问题.. 这只是我一直在使用的 JSON 的一部分……您可以随意说我的结构是否不好；）

var store = [
                    {
                        "category": "mobile",
                        "description": "Mobile Phones",
                        "products" : 
                        [


                            {"manufacturer": "Nokia", "name":"Nokia 301", "price": 100, "quantity": 0, "img": "nokia301-front"},
                            {"manufacturer": "ZTE", "name":"ZTE FTV", "price": 300, "quantity": 0, "img": "zteftv-front"},
                            {"manufacturer": "ZTE", "name":"ZTE Blade 3", "price": 500, "quantity": 0, "img": "zteblade3-front"},
                            {"manufacturer": "Sony", "name":"Sony Xperia E", "price": 600, "quantity": 0, "img": "sonyxperiae-front"},
                            {"manufacturer": "Samsung", "name":"Samsung Galaxy Ace Plus", "price": 300, "quantity": 0, "img": "samsunggalaxyaceplus-front"},
                            {"manufacturer": "ZTE", "name":"ZTE Blade G", "price": 350, "quantity": 0, "img": "ztebladeg-front"},
                            {"manufacturer": "LG", "name":"LG Optimus L7 II", "price": 600, "quantity": 0, "img": "lgoptimusl7ii-front"},
                            {"manufacturer": "HTC", "name":"HTC Desire X", "price": 500, "quantity": 0, "img": "htcdesirex-front"},
                            {"manufacturer": "Nokia", "name":"Nokia Lumia 620", "price": 500, "quantity": 0, "img": "nokialumia620-front"}
                        ]
                    },
                    {
                        "category": "laptop",
                        "description": "Laptops",
                        "products" : 
                            [
                                {"name":"Asus X55A", "price": 400, "quantity": 0, "img": "asusx55a-front"},
                                {"name":"Samsung Series 9", "price": 500, "quantity": 0, "img": "samsungseries9-front"}
                            ]
                    },
                    {
                        "category": "tablets",
                        "description": "Tablet Devices",
                        "products" : 
                        [
                            {"name":"Prestigio Touch", "price": 270, "quantity": 0, "img": "prestigiotouch-front"},
                            {"name":"Samsung Galaxy Tab 2 7.0", "price": 400, "quantity": 0, "img": "samsunggalaxytab270-front"},
                            {"name":"Samsung Galaxy Note 10.1", "price": 430, "quantity": 0, "img": "samsunggalaxynote101-front"}
                        ]
                    }
                ];

Answer 1

一个纯粹而愚蠢的jQuery解决方案：

var names = [];
$("ul li").each(function(){
    if($.inArray($(this).text(), names) != -1){
        $(this).remove();
    }else{
        names.push($(this).text());
    }
});

Try it in this jsfiddle

最好让列表在后端唯一，但这取决于数据的创建方式。

Answer 2

如果是我的代码，我会在创建任何 html 元素之前从数据中删除重复项。但是，由于您没有显示任何 JavaScript 或 JSON 结构，我只能为您提供一种从 html 中删除重复项的方法：

var names = {};
$("ul li").filter(function() {
    var name = $(this).text();
    if (name in names)
        return true;
    names[name] = true;
    return false;
}).remove();

演示：http://jsfiddle.net/C88Uj/

如果你不确定我使用的 jQuery 函数是如何工作的，你知道where to look。

Answer 3

你也可以使用Angular-UI提供的独特过滤器

<ul>
    <li ng-repeat="item in items | unique:attribute">{{ item.attribute }}</li>
</ul>

http://angular-ui.github.io/