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

Question

标题很愚蠢，就像我说的那样:)我不知道这是不是可能的，但我必须问一下……我在Angularjs中使用ng-repeat和JSON，我得到的是一个包含这些值的列表。

 <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/