how to change image dynamically according to the values in angular js

Question

i want to show particular image when value is greater than 3(float) . while less than 3 it should show different image. how to write condition in of comparing value and according to that need to show.

condition

value > 3.5 = http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Accept-icon.png
value =< http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Accept-icon.png 

code 
      <script>
           var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $http.get('https://example.com/get', {
                headers: { 'Authorization': 'Basic a2VybmVsc==' }
            })
               .then(function (response) {
                   $scope.names = response.data;
                   $scope.decodedFrame = atob($scope.names.dataFrame);
                   $scope.decodedFrameNew = $scope.decodedFrame.substring(4);
                   $scope.distanceinFeet = 835 * 0.95;
                   $scope.Value = $scope.distanceinFeet / 148;
                   $scope.parkingslot1 = $scope.Value.toFixed(2);
                   $scope.names.timestamp = new Date($scope.names.timestamp).toLocaleString(); // Parse the date to a localized string
               });


            alert("hi");
            $scope.getSlotImage = function (slot) {
                alert("hi");
                var imageUrl = slot > 3.5 ? 'http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Accept-icon.png' :
                        'https://cdn3.iconfinder.com/data/icons/musthave/256/Cancel.png'
                alert("hi");

                return imageUrl;
                alert("hi");

            }
            });

    </script>

body

  <td><img ng-if ng-src="{{getSlotImage(parkingslot1)}}" /></td>

what value 3.5?? or 3??

Saurabh Agrawal
– Saurabh Agrawal

2017-02-18 13:14:01 +00:00
Commented Feb 18, 2017 at 13:14 — Saurabh Agrawal
– Saurabh Agrawal, Commented Feb 18, 2017 at 13:14
if greater than 3.00

Swapna
– Swapna

2017-02-18 13:15:14 +00:00
Commented Feb 18, 2017 at 13:15 — Swapna
– Swapna, Commented Feb 18, 2017 at 13:15

coder · Accepted Answer · 2017-02-19 04:46:23Z

1

You could just call a function inside ng-src to get the relevant image. Below you can see, how it should look like your controller and view

View

No need ng-if here.

<td><img ng-src="{{getSlotImage(parkingslot1)}}" /></td>

Controller

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get('https://example.com/get', {
      headers: {
        'Authorization': 'Basic a2VybmVsc=='
      }
    })
    .then(function(response) {
      $scope.names = response.data;
      $scope.decodedFrame = atob($scope.names.dataFrame);
      $scope.decodedFrameNew = $scope.decodedFrame.substring(4);
      $scope.distanceinFeet = 835 * 0.95;
      $scope.Value = $scope.distanceinFeet / 148;
      $scope.parkingslot1 = $scope.Value.toFixed(2);
      $scope.names.timestamp = new Date($scope.names.timestamp).toLocaleString(); // Parse the date to a localized string
    });

  $scope.getSlotImage = function(slot) {
    var imageUrl = slot > 3.5 ? 'http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Accept-icon.png' : 'https://cdn3.iconfinder.com/data/icons/musthave/256/Cancel.png';

    return imageUrl;
  }
});

edited Feb 19, 2017 at 4:46

answered Feb 18, 2017 at 13:15

coder

8,74216 gold badges41 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

coder Over a year ago

Value mean what you need to pass into, to do evaluate your logic to get the relevant image, in your case parkingslot1. Hope you got my idea

Swapna Over a year ago

my sample value is 5.36. im not getting image.

coder Over a year ago

It is working fine. I just check it. In controller I gave $scope.parkingslot1 = 5.36 and also loaded the Accept-icon.png

coder Over a year ago

put $scope.getSlotImage function outside form your get request. It should inside your myCtrl scope

coder Over a year ago

I just udated your code in question. I changed the place of getSlotImage function. Check it

|

nivas · Accepted Answer · 2017-02-18 12:43:30Z

0

Try this

<img ng-if="Value>3.5" ng-src="{{slot1image['>3.5']}}" /></td>  
<img ng-if="Value<=3.5" ng-src="{{slot1image['<=3.5']}}" /></td>

Unfortunatly you can not use dot notation

answered Feb 18, 2017 at 12:43

nivas

3,1963 gold badges19 silver badges15 bronze badges

Collectives™ on Stack Overflow

how to change image dynamically according to the values in angular js

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related