Angular ng-repeat 和 ng-show 用于从 JSON 中提取个人数据

Question

我有一个旋转木马，想显示通过唯一代码从我的 JSON 文件中提取数据的三个项目的标题和描述。可以用ng-show表示'if this equals code01 then display the other data for that item'吗？我已经编写了一些我认为应该有效但无效的代码。

<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-show 语句中 'codes' 周围缺少引号。尝试：

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

这样您就可以将 product.code 与字符串 'code01'.

进行比较

除此之外，我注意到您也可以清理一些东西。以下html重复三次（每个'code'一次）：

<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-show 的值周围加上引号，因此：

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

应该可以。

Angular ng-repeat 和 ng-show 用于从 JSON 中提取个人数据

Angular ng-repeat and ng-show for pulling individual data from JSON

json

angularjs

ng-repeat

ng-show