將具有相同值的列表元素轉換爲具有值的一個元素

標題是愚蠢的，因爲我與這一個:) 我不知道這是甚至可能，但我不得不問..我用ng-repeat與JSON在Angularjs和我所得到的是與這些值的列表..將具有相同值的列表元素轉換爲具有值的一個元素

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

來源

2013-07-16 Gojko Ubiparip

提供獨特的過濾網嘛取決於你如何生成第一個列表。如果JSON中有重複項，那麼您可以迭代它並創建一個只存儲唯一名稱的新數組。你應該提供所有相關的代碼。 – Ma3x

當然有可能。您可以在創建html元素之前處理數據以刪除重複項，或創建html元素，然後刪除重複項。（作爲一個不相干的部分，如果_every_ li元素具有相同的類，則將該類添加到包含的ul元素中會更加方便）。 – nnnnnn

@nnnnnn：當您首先使用AngularJS綁定到它時清除HTML是奇怪的。他應該過濾數據，如果他只是想要不同的基礎模型表示。 – Ma3x

純和愚蠢的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

你可能會更好過馬在後臺獨一無二的列表，但這取決於如何創建數據。

來源

2013-07-16 12:59:44

如果是我的代碼，我會在創建任何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。

來源

2013-07-16 12:59:54 nnnnnn

我其實喜歡這個比我的功能方面更好:-) –

謝謝@ jm_toball。 – nnnnnn

這就是我正在尋找的:)我將編輯這個問題，讓你的好人可以看到我的JSON ... –

您也可以使用角UI

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

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

來源

2013-07-16 13:25:26 fpavone

我很喜歡這個答案，也許是我的問題的最佳解決方案，謝謝.. –

將具有相同值的列表元素轉換爲具有值的一個元素

回答

相關問題