How to change image based on condition in Angular JS?

Question

I want to show an image instead of text according to the data coming in the response of an API.

If true - access symbol,
If false - deny symbol should be shown.

I tried but I am getting the link in the display not the image.

<div ng-app="myApp" ng-controller="customersCtrl">
  <table>
    <tr>
      <td>device id</td>
      <td>device unique id</td>
      <td>access status</td>
      <td>current time</td>
    </tr>
    <tr>
      <td>{{ access.id }}</td>
      <td>{{ access.devid }}</td>
      <!--<td>{{ access.status }}</td>-->
      <td>{{statusValues[access.status]}}</td>
      <td>{{ access.CurrentTime }}</td>
    </tr>
  </table>
</div>
</div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function ($scope, $http) {
      $http.get("http://example.com/get")
        .then(function (response) {
        $scope.access = response.data.sensorsdata;
        $scope.statusValues = {
          'true': 'http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Accept-icon.png',
          'false': 'https://cdn3.iconfinder.com/data/icons/musthave/256/Cancel.png',
        }
      });
    });

Nachshon Schwartz · Accepted Answer · 2017-01-28 18:50:31Z

Simpy add the img tag with ng-src like so:

<div ng-app="myApp" ng-controller="customersCtrl">
      <table>
          <tr>
              <td>device id</td>
              <td>device unique id</td>
              <td>access status</td>
              <td>current time</td>
          </tr>
          <tr>
              <td>{{ access.id }}</td>
              <td>{{ access.devid }}</td>
              <td><img ng-src="{{statusValues[access.status]}}"/></td> 
              <td>{{ access.CurrentTime }}</td>
          </tr>
     </table>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function ($scope, $http) {
        $http.get("http://example.com/get")
            .then(function (response) {
                $scope.access = response.data.sensorsdata; 
                $scope.statusValues = {
                    'true': 'http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Accept-icon.png',
                    'false': 'https://cdn3.iconfinder.com/data/icons/musthave/256/Cancel.png',
            }
        });    
    });
</script>

Mistalis · Accepted Answer · 2017-01-24 12:40:39Z

1

You can use the following synthax in your ngSrc:

<img ng-src="{{statusValues[access.status]}}"/>

answered Jan 24, 2017 at 12:40

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Comments

Arno_Geismar · Accepted Answer · 2017-01-24 12:41:31Z

1

<td><img ng-src="{{statusValues[access.status]}}"/></td>

you are missing an image tag

answered Jan 24, 2017 at 12:41

Arno_Geismar

2,3301 gold badge19 silver badges30 bronze badges

1 Comment

Arno_Geismar Over a year ago

@Swapna you are welcome. If this answer was helpful please upvote and accept as answer. thank you

dda · Accepted Answer · 2017-01-24 12:54:45Z

1

Use

<img ng-src="{{statusValues[access.status]}}"/>

edited Jan 24, 2017 at 12:54

dda

6,2212 gold badges27 silver badges37 bronze badges

answered Jan 24, 2017 at 12:49

Sunnny

994 bronze badges

Comments

Vishnu S Babu · Accepted Answer · 2017-01-24 13:12:58Z

1

Try with this code:

  <div ng-app="myApp" ng-controller="customersCtrl">
          <table>
              <tr>
                  <td>device id</td>
                  <td>device unique id</td>
                  <td>access status</td>
                  <td>current time</td>
              </tr>
              <tr>
                  <td>{{ access.id }}</td>
                  <td>{{ access.devid }}</td>
                  <td><img ng-src="{{statusValues[access.status]}}"/></td>
                  <td>{{ access.CurrentTime }}</td>
              </tr>
         </table>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function ($scope, $http) {
            $http.get("http://example.com/get")
                .then(function (response) {
                    $scope.access = response.data.sensorsdata; 
                    $scope.statusValues = {
                        'true': 'http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Accept-icon.png',
                        'false': 'https://cdn3.iconfinder.com/data/icons/musthave/256/Cancel.png',
                }
            });    
        });
    </script>

You had been missing the closing for <img> tag "/>

answered Jan 24, 2017 at 13:12

Vishnu S Babu

1,6502 gold badges13 silver badges23 bronze badges

8 Comments

Swapna Over a year ago

can u tell me how to refresh this page in javascript function.

Vishnu S Babu Over a year ago

<a href="javascript:location.reload(true)">Refresh Page</a> or location.reload(); helps you to refresh your current page.

Swapna Over a year ago

<a href="javascript:location.reload(true)"> <table>...</table></a>.can u write like this ?

Vishnu S Babu Over a year ago

do u want to reload your table or full page?

Swapna Over a year ago

need to refresh only one table. is it possible to refresh if the data is changed int the database. so that we can avoid page refresh in each second

|

Collectives™ on Stack Overflow

How to change image based on condition in Angular JS?

5 Answers 5

Comments

Comments

1 Comment

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related