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

对我而言，第一件事就是缺少“＆＃39;代码”的引号。在你的ng-show语句中。尝试：

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

这样您就可以将product.code与字符串＆＃39; code01＆＃39;进行比较。

除此之外，我还注意到你可以清理的东西。以下html重复三次（每次一次＆＃39;代码＆＃39;）：

<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中提取单个数据

2 个答案: