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

【问题标题】：Angular ng-repeat and ng-show for pulling individual data from JSONAngular ng-repeat 和 ng-show 用于从 JSON 中提取单个数据
【发布时间】：2015-06-20 09:01:07
【问题描述】：

我有一个轮播，想要显示三个项目的标题和描述，这些项目通过唯一代码从我的 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>

非常感谢

【问题讨论】：

标签： json angularjs ng-repeat ng-show

【解决方案1】：

首先让我感到震惊的是，您的 ng-show 语句中的“代码”周围缺少引号。试试：

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

这样您将 product.code 与字符串 'code01' 进行比较。

此外，我注意到您也可以清理一些东西。以下 html 重复 3 次（每个“代码”一次）：

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

【讨论】：

【解决方案2】：

您需要在 ng-show 中为值加上引号，因此：

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

应该可以的。

【讨论】：