Angular ng-repeat和ng-show從JSON中提取單個數據

Question

我有一個旋轉木馬，想顯示三個項目的標題和描述，這些項目是通過唯一代碼從我的JSON文件中提取數據的。是否可以使用ng-show來說'如果這等於code01，然後顯示該項目的其他數據'。我寫了一些我認爲應該工作的代碼，但沒有。

<div id="slider-carousel" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#slider-carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#slider-carousel" data-slide-to="1"></li> 
     <li data-target="#slider-carousel" data-slide-to="2"></li> 
    </ol> 
    <div ng-repeat="product in store.products"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <div ng-show="product.code === code01"> 
        <h1><product-title></product-title></h1> 
        <p><product-description></product-description> </p> 
       </div> 
      </div> 
      <div class="item"> 
       <div ng-show="product.code === code02"> 
        <h1><product-title></product-title></h1> 
        <p><product-description></product-description> </p> 
       </div> 
      </div> 

      <div class="item"> 
       <div ng-show="product.code === code03"> 
        <h1><product-title></product-title></h1> 
        <p><product-description></product-description> </p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev"> 
     <i class="icon icon-arrow-circle-left"></i> 
    </a> 
    <a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next"> 
     <i class="icon icon-arrow-circle-right"></i> 
    </a> 
</div> 

非常感謝

Answer 1

，在跳出我的第一件事情是缺乏在你的周圍NG-顯示報表「碼」行情。嘗試：

ng-show="product.code === 'code01'"

這樣你比較product.code字符串 'CODE01'。

爲了補充一點，我注意到了一些你可能能夠清理的東西。下面的HTML重複三次（一次爲每個「代碼」）：

<div ng-show="product.code === code01"> 
    <h1><product-title></product-title></h1> 
    <p><product-description></product-description> </p> 
</div> 

可以在ng-show使用布爾表達式，所以不是每個代碼分開的HTML代碼，你可以一次爲寫：

<div ng-show="product.code === 'code01' || product.code === 'code02' || product.code === 'code03'"> 
    <h1><product-title></product-title></h1> 
    <p><product-description></product-description> </p> 
</div> 

Answer 2

你需要把引號圍繞價值在你的NG-演出，所以：

ng-show="product.code === 'code01'" 

這應該工作。