CODEWITHSUNDEEP
javascripthtmlcssangularjs
Swapna
Swapna

Reputation: 403

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

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>

Upvotes: 1

Views: 1183

Answers (2)

coder
coder

Reputation: 8702

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

Upvotes: 1

nivas
nivas

Reputation: 3186

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

Upvotes: 0

Related Questions