重複顯示問題

Question

look this image to see the problem

我開發AngularJS一個簡單的應用程序（開始），我有一個擔心，因爲我的下拉列表，允許通過風格來選擇電影的名單，在我的JSON文件中多次顯示樣式。我已經嘗試了幾種解決方案，但沒有任何工作，我阻止了一段時間，只有（並且可以添加後）完成我的應用程序並填充我的JSON文件。 JSON FILE：

[ 
    { 
     "picture" : "la-malediction", 
     "title" : "LA MALEDICTION", 
     "year" : "1976", 
     "time" : "1h41", 
     "director" : "Richard Donner", 
     "synopsis" : "Robert Thorn est ambassadeur des États-Unis à Londres. Plusieurs décès tragiques et étranges ont lieu dans son entourage. Keith Jennings, un photographe et le père Brennan finissent par convaincre Thorn que Damien, son fils de cinq ans, un orphelin aux origines obscures qu'il a adopté à sa naissance à l'insu de sa femme qui venait de faire une fausse couche, n'est autre que l'Antéchrist.", 
     "style" : "Horreur",  
     "scenario" : "David Seltzer", 
     "production" : "20th Century Fox", 
     "music" : "Jerry Goldsmith", 
     "score" : "7.5/10", 
     "actors" : "Gregory Peck, Lee Remick, David Warner, Billie Whitelaw, Patrick Throughton, Harvey Stephens, Sheila Reynor, Martin Benson, Leo McKern, Tommy Duggan, Anthony Nicholls, Nicholas Campbell" 
    }, 

    { 
     "picture" : "volte-face", 
     "title" : "Volte/Face",  
     "year" : "1997", 
     "time" : "2h18", 
     "director" : "John Woo", 
     "synopsis" : "1991 : le terroriste Castor Troy tente d'abattre son ennemi juré Sean Archer, agent du FBI. Au moment du tir, il rate Archer, mais abat accidentellement son fils. Six ans plus tard, Castor est repéré à Los Angeles. À la suite d'un violent affrontement à l'aéroport, Castor est plongé dans le coma par Archer. Ce dernier apprend que Troy a placé une bombe chimique en ville. Il prend le visage de Troy, grâce à une opération chirurgicale, afin d'infiltrer un pénitencier secret où est détenu Pollux, le frère de Castor, pour connaitre l'emplacement de la bombe. Entre-temps, Troy sort du coma et se fait lui-même greffer le masque d'Archer, puis tue tous ceux qui sont au courant de l'opération, volant ainsi le travail, la vie et la femme d'Archer. Livré à lui-même, privé de son identité, ce dernier décide de s'évader...", 
     "style" : "Thriller",  
     "scenario" : "Mike Werb, Michael Colleary", 
     "production" : "Paramount Picture", 
     "music" : "John Powell", 
     "score" : "9/10", 
     "actors" : "Joh Travolta, Nicolas Cage, Joan Allen, Alessandro Nivola, Dominique Swain, Gina Gershon, Nick Cassavetes" 

    }, 

    { 
     "picture" : "la-fureur-du-dragon", 
     "title" : "La fureur du dragon",   
     "year" : "1997", 
     "time" : "2h18", 
     "director" : "John Woo", 
     "synopsis" : "1991 : le terroriste Castor Troy tente d'abattre son ennemi juré Sean Archer, agent du FBI. Au moment du tir, il rate Archer, mais abat accidentellement son fils. Six ans plus tard, Castor est repéré à Los Angeles. À la suite d'un violent affrontement à l'aéroport, Castor est plongé dans le coma par Archer. Ce dernier apprend que Troy a placé une bombe chimique en ville. Il prend le visage de Troy, grâce à une opération chirurgicale, afin d'infiltrer un pénitencier secret où est détenu Pollux, le frère de Castor, pour connaitre l'emplacement de la bombe. Entre-temps, Troy sort du coma et se fait lui-même greffer le masque d'Archer, puis tue tous ceux qui sont au courant de l'opération, volant ainsi le travail, la vie et la femme d'Archer. Livré à lui-même, privé de son identité, ce dernier décide de s'évader...", 
     "style" : "Kung-fu",   
     "scenario" : "Mike Werb, Michael Colleary", 
     "production" : "Paramount Picture", 
     "music" : "John Powell", 
     "score" : "9/10", 
     "actors" : "John Travolta, Nicolas Cage, Joan Allen, Alessandro Nivola, Dominique Swain, Gina Gershon, Nick Cassavetes" 

    }, 

    { 
     "picture" : "la-fureur-du-dragon", 
     "title" : "La fureur du dragon",   
     "year" : "1997", 
     "time" : "2h18", 
     "director" : "John Woo", 
     "synopsis" : "1991 : le terroriste Castor Troy tente d'abattre son ennemi juré Sean Archer, agent du FBI. Au moment du tir, il rate Archer, mais abat accidentellement son fils. Six ans plus tard, Castor est repéré à Los Angeles. À la suite d'un violent affrontement à l'aéroport, Castor est plongé dans le coma par Archer. Ce dernier apprend que Troy a placé une bombe chimique en ville. Il prend le visage de Troy, grâce à une opération chirurgicale, afin d'infiltrer un pénitencier secret où est détenu Pollux, le frère de Castor, pour connaitre l'emplacement de la bombe. Entre-temps, Troy sort du coma et se fait lui-même greffer le masque d'Archer, puis tue tous ceux qui sont au courant de l'opération, volant ainsi le travail, la vie et la femme d'Archer. Livré à lui-même, privé de son identité, ce dernier décide de s'évader...", 
     "style" : "Kung-fu",   
     "scenario" : "Mike Werb, Michael Colleary", 
     "production" : "Paramount Picture", 
     "music" : "John Powell", 
     "score" : "9/10", 
     "actors" : "John Travolta, Nicolas Cage, Joan Allen, Alessandro Nivola, Dominique Swain, Gina Gershon, Nick Cassavetes" 

    } 

] 

<div class="jumbotron"> 
    <input type="text" ng-model="query"/> 
    <br>  
    <br> 

    <select ng-model="styles" ng-options="media.style for media in medias track by media.style"></select> 

    <div class="order"> 
     <p> 
      <label><input type="radio" ng-model="direction" /> Croissant</label> 
     </p> 

     <p> 
      <label><input type="radio" ng-model="direction" value="reverse" /> Décroissant</label> 
     </p>  
    </div>    
</div> 

    <article class="media" ng-repeat="media in medias | filter : styles"> 

<div class="jumbotron"> 
    <div class="media"> 
     <h2 id="title-movie">{{media.title}}</h2> 
     <div class="media-left" > 
      <img ng-src="images/{{media.picture}}.png" alt="{{media.title}}" /> 
     </div> 

     <div class="media-body" style="margin-top:15px;">    
      <p class="description">Style : {{media.style}}</p> 
      <p class="description">Année : {{media.year}}</p> 
      <p class="description">Durée : {{media.time}}</p> 
      <p id="infos"><a class="link-info" href="#/detail/{{medias.indexOf(media)}}">Plus d'info</a></p>     
     </div> 
    </div> 
</div> 

controller ANGULAR JS

Answer 1

現在我得到了你的問題。那麼，你可以使用Angular UI篩選器獨特的。

我找不到原始代碼，但是我發現this fork。

所以，你只需要添加過濾器：

var mediaControllers = angular.module('mediaControllers', []); 

/** 
* Filters out all duplicate items from an array by checking the specified key 
* @param [key] {string} the name of the attribute of each object to compare for uniqueness 
if the key is empty, the entire object will be compared 
if the key === false then no filtering will be performed 
* @return {array} 
*/ 
mediaControllers.filter('unique', function() { 

    return function (items, filterOn) { 

    if (filterOn === false) { 
     return items; 
    } 

    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) { 
     var hashCheck = {}, newItems = []; 

     var extractValueToCompare = function (item) { 
     if (angular.isObject(item) && angular.isString(filterOn)) { 
      return item[filterOn]; 
     } else { 
      return item; 
     } 
     }; 

     angular.forEach(items, function (item) { 
     var valueToCheck, isDuplicate = false; 

     for (var i = 0; i < newItems.length; i++) { 
      if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) { 
      isDuplicate = true; 
      break; 
      } 
     } 
     if (!isDuplicate) { 
      newItems.push(item); 
     } 

     }); 
     items = newItems; 
    } 
    return items; 
    }; 
}); 

然後，你把過濾器上的ng-options：

<select ng-model="styles" ng-options="media.style for media in medias | unique: 'style'"></select> 

我測試了它和它的工作。我希望它能解決你的問題。

UPDATE：

你也應該更新過濾器，以匹配所選項目風格而不是選定的對象。

<article class="media" ng-repeat="media in medias | filter : styles.style">