Question

我希望在值大于3（浮动）时显示特定图像。虽然小于3，但它应该显示不同的图像。如何写出比较值的条件并根据需要显示。

条件

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>

Answer 1

你可以在ng-src中调用一个函数来获取相关图像。下面你可以看到它应该如何看起来像你的控制器和视图

查看

不需要 - 如果在这里。

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

控制器

＆＃13;

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

＆＃13;

Answer 2

试试这个

ng-if="todayBirthday ? onlyToday(friend) : true"

不幸的是，你不能使用点符号

Answer 3

试试这个

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

如何根据角度js中的值动态更改图像

3 个答案: