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

时间:2016-03-10 16:56:00

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

我试图写一个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"
  },

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

3 个答案:

答案 0 :(得分:1)

如果amber_lightred_light是图片路径,那么您可以ng-src使用img标记:

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

答案 1 :(得分:0)

将您的HTML更改为此         

</md-grid-tile>

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

答案 2 :(得分:0)

如果您只是想根据条件显示不同的图像,可以将ng-src与条件运算符一起使用。

像这样的东西

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