CODEWITHSUNDEEP
javascriptangularjsif-statementangularjs-ng-repeat
4rh4m97
4rh4m97

Reputation: 15

if/else statement with ng-src and ng-repeat

I'm trying to write an if/else statement and what I want to happen is that if the condition is true I want to display a picture and if it's false another picture.

This is my controller:

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

If this case is equal to 1 it should display an red light that is saved in the same folder where my index.html file is stored.

This is my HTML. I'm using ng-repeat because I want to make a table.

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

I know that I have to use ng-src but i don't know how i would use it in this case. Also to if this help a bit more this is my data.

    {
    "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"
  },

All the help is much appreciated and I'm sorry for my bad English. It's not my first language.

Upvotes: 1

Views: 3133

Answers (3)

Alex Chance
Alex Chance

Reputation: 793

If you are just wanting to display a different image based on a condition, you can use ng-src with a conditional operator.

Something like this 

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

Upvotes: 0

statelessprotocol
statelessprotocol

Reputation: 66

Change your html to this 

</md-grid-tile>

getFeatureNo(thisCase) should return the path of the image.

Upvotes: 0

Shaun
Shaun

Reputation: 2052

If amber_light and red_light are the image paths, then you can just use ng-src with an img tag:

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

Upvotes: 1

Related Questions