값이 3 (float)보다 클 때 특정 이미지를 표시하고 싶습니다. 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>
ng-src 내부의 함수를 호출하여 관련 이미지를 얻을 수 있습니다. 아래에서 컨트롤러와 뷰가 어떻게 보이는지 볼 수 있습니다.
전망
여기 있으면 필요하지 않습니다.
<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;
}
});이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다