如何根據角度js中的值動態更改圖像

我想在值大於3（浮點數）時顯示特定圖像。而少於3則應顯示不同的圖像。如何寫入比較值和根據需要顯示的條件。如何根據角度js中的值動態更改圖像

條件

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>

體

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

來源

2017-02-18 Swapna

什麼值3.5？或3？ –

如果大於3.00 – Swapna

你可以只叫NG-SRC內部功能得到相對前衛形象。下面你可以看到，它應該怎麼看起來像你的控制器和視圖

查看

不需要NG-如果在這裏。

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

控制器

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

來源

2017-02-18 13:15:06

什麼是值？ – Swapna

價值意味着你需要進入，以評估你的邏輯，以獲得相關的圖像，在你的情況parkingslot1。希望你有我的想法 –

我的樣本值是5.36。我沒有得到形象。 – Swapna

試試這個

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

不幸的是，你不能用點號

來源

2017-02-18 12:43:30 nivas

試試這個

<script> 
      var app = angular.module('myApp', []); 
      app.controller('myCtrl', function ($scope, $http) { 
       $http.get('https://url', { 
        headers: { 'Authorization': 'Basic pwd==' } 
       }) 
        .then(function (response) { 
         $scope.names = response.data; 
         $scope.decodedFrame = atob($scope.names.dataFrame); 
         $scope.decodedFrameNew = $scope.decodedFrame.substring(4); 
         //calculating the feet 
         $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.slot1image = { 
          '>3.5': 'http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Accept-icon.png', 
          '=<3.5': 'https://cdn3.iconfinder.com/data/icons/musthave/256/Cancel.png' 
         } 

         $scope.greaterValue = $scope.slot1image['=<3.5']; 
         $scope.lessValue = $scope.slot1image['>3.5']; 
        }); 
      }); 
     </script>

HTML

<img ng-if="Value>3.5" ng-src="{{greaterValue}}" /> 
<img ng-if="Value<=3.5" ng-src="{{lessValue}}" />

來源

2017-02-18 13:24:14

我的樣本值是5.36。它會工作 – Swapna

是的，它會工作，確保它是'$ scope.Value' –

如何根據角度js中的值動態更改圖像

回答

相關問題