Question

我正在Angular重建一个客户网站，其中一部分是重新建立他列出他的财产的方式。在此期间，我创建了一个控制器，使用$ http从外部json文件中提取可变数据，然后使用ng-repeat填充页面。

一切都按预期工作，但我有另一个我想要解决的功能。一些属性是合同或出售的，我想根据json变量中的设置在图像上放置一个角带。我能够使用ng-class稍微使用它...请参阅下面的代码。

    <div class="row outer" ng-repeat="listing in listings | filter:query | orderBy:orderProp">
            <div class="col-md-4">
                <div class="featured-block">
                    <div ng-class="{ featured : listing.featured == 1}">
                        <div class="ribbon ribbon-red">
                            <div class="banner">
                                <div class="text">Under Contract</div>
                            </div>
                        </div>
                            <img class="img-responsive listings-img" ng-src="{{listing.imageUrl}}">
                    </div>
                </div>
            </div>
...

正如你所看到的那样，它可以工作，但Under Contract被硬编码到页面中，所以即使设置了一个带有一个特征== 1的变量的图像，硬编码＆＃34; Under Contract＆＃34;显示在每张图片中。

理想情况下，我希望能够根据可变条件动态显示各种色带，但我们很乐意只显示“合同”下的条款。仅当在json文件中设置变量feature == 1时。我希望这是有道理的。谢谢您的帮助。这是一个屏幕截图，显示基于上面代码显示的功能区 - 我无法在此处插入图像，但我在此处托管了图像http://studiorooster.com/corbett-ng.png

Answer 1

使用ng-show

喜欢：

<div class="ribbon ribbon-red" ng-show="listing.featured == 1">
     <div class="banner">
          <div class="text">Under Contract</div>
      </div>
</div>

Answer 2

对于角度来说，这似乎是一件简单的事情。我为你制造了一个混蛋。它使用ng-class和ng-show隐藏横幅以及使用ng-show更改特色类。如果你有很多课程我会建议ng-class，但我想这取决于项目以及标记的独特性。

http://jsfiddle.net/27rxqeLL/1/

Answer 3

最终代码解决方案 感谢@Ram和@Pedro的帮助。所以其他人可以受益，这是结合你的两个建议的最终代码。

<div class="row outer" ng-repeat="listing in listings | filter:query | orderBy:orderProp">
        <div class="col-md-4">
            <div class="featured-block">
                <div ng-class="{ contracted : listing.featured == 1, sold: listing.featured == 2, reduced: listing.featured == 3}">
                    <div class="ribbon ribbon-red" ng-show="listing.featured == 1">
                        <div class="banner">
                            <div class="text">Under Contract</div>
                        </div>
                    </div>
                    <div class="ribbon ribbon-blue" ng-show="listing.featured == 2">
                        <div class="banner">
                            <div class="text">Sold</div>
                        </div>
                    </div>
                    <div class="ribbon ribbon-orange" ng-show="listing.featured == 3">
                        <div class="banner">
                            <div class="text">Reduced</div>
                        </div>
                    </div>
                        <img class="img-responsive listings-img" ng-src="{{listing.imageUrl}}">
                </div>
            </div>
        </div>

包含带有ng-class表达式的变量数据

3 个答案: