带有 ng-src 和 ng-repeat 的 if/else 语句答案

【问题标题】：if/else statement with ng-src and ng-repeat带有 ng-src 和 ng-repeat 的 if/else 语句
【发布时间】：2016-03-11 01:14:09
【问题描述】：

我正在尝试编写 if/else 语句，我想要发生的是，如果条件为真，我想显示一张图片，如果它为假，则显示另一张图片。

这是我的控制器：

$scope.getFeatureNo = function (thisCase) {
        if (thisCase.featureno == 1) {
            return red_light;
        }
        else {
            return amber_light;
        }

如果这种情况等于 1，它应该显示一个红灯，它保存在我的 index.html 文件所在的同一文件夹中。

这是我的 HTML。我正在使用 ng-repeat，因为我想制作一张桌子。

  <md-grid-tile ng-repeat-start="thisCase in caselist">
        {{getFeatureNo(thisCase)}}
  </md-grid-tile>

我知道我必须使用 ng-src，但我不知道在这种情况下我将如何使用它。另外，如果这有助于更多，这是我的数据。

    {
    "SchemeCaseID": "122^239",
    "featureno": "1",
    "slide": "LC",
    "malignancy": "1",
    "noParticipantsHit": 46,
    "noParticipantsMissed": 733,
    "noParticipantsHitNormal": 3,
    "noParticipantsHitBenign": 12,
    "noParticipantsHitMalignant": 31,
    "typeidx": "1",
    "coords": "0.33217993079584773:0.2051948051948052,0.42560553633217996:0.2025974025974026,0.5051903114186851:0.23376623376623376,0.5536332179930796:0.2779220779220779,0.5813148788927336:0.3220779220779221,0.5951557093425606:0.36103896103896105,0.5813148788927336:0.38961038961038963,0.5155709342560554:0.3974025974025974,0.4290657439446367:0.35324675324675325,0.33217993079584773:0.3012987012987013,0.314878892733564:0.2857142857142857,0.314878892733564:0.2857142857142857"
  },



      {
    "SchemeCaseID": "122^240",
    "featureno": "2",
    "slide": "LC",
    "malignancy": "2",
    "noParticipantsHit": 110,
    "noParticipantsMissed": 669,
    "noParticipantsHitNormal": 7,
    "noParticipantsHitBenign": 76,
    "noParticipantsHitMalignant": 27,
    "typeidx": "7",
    "coords": "0.0034602076124567475:0.2545454545454545,0.02768166089965398:0.2545454545454545,0.04844290657439446:0.2805194805194805,0.03460207612456748:0.3012987012987013,0.01384083044982699:0.3142857142857143,0.010380622837370242:0.3142857142857143,0.010380622837370242:0.3142857142857143"
  },

非常感谢所有帮助，我很抱歉我的英语不好。这不是我的第一语言。

【问题讨论】：

你试过<img ng-src="{{getFeatureNo(thisCase)}}" />吗？

标签： javascript angularjs if-statement angularjs-ng-repeat

【解决方案1】：

如果amber_light 和red_light 是图像路径，那么您可以只使用带有img 标签的ng-src：

<img ng-src="{{ getFeatureNo(thisCase) }}" />

【讨论】：

【解决方案2】：

将您的 html 更改为此

</md-grid-tile>

getFeatureNo(thisCase) 应该返回图片的路径。

【讨论】：

【解决方案3】：

如果您只是想根据条件显示不同的图像，您可以使用带有条件运算符的 ng-src。

像这样的

<img ng-src="{{thisCase.FeatureNo == 1 ? 'red light image url' : 'amber light image url'}}">

【讨论】：