CODEWITHSUNDEEP
javascripthtmlangularjs
Swapna
Swapna

Reputation: 403

How to change image based on condition in Angular JS?

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

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',
        }
      });
    });

Upvotes: 0

Views: 622

Answers (5)

Nachshon Schwartz
Nachshon Schwartz

Reputation: 15795

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>

Upvotes: 2

Vishnu S Babu
Vishnu S Babu

Reputation: 1640

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 "/>

Upvotes: 1

Sunnny
Sunnny

Reputation: 99

Use 

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

Upvotes: 1

Arno_Geismar
Arno_Geismar

Reputation: 2330

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

you are missing an image tag

Upvotes: 1

Mistalis
Mistalis

Reputation: 18309

You can use the following synthax in your ngSrc:

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

Upvotes: 1

Related Questions