Отображение изображений в Угловом, если условие выполнено

Question

У меня есть вызов API, который возвращает обратно число. В зависимости от того, что это за номер, я хочу показать конкретное изображение.

Например, если:

0 to 100: icon1.png 
101 to 200: icon2.png 
201 to 300: icon3.png 
301 to 400: icon4.png 
401 to 500: icon5.png 
501 to 600: icon6.png 

$scope.result = 60 

How would I get the result to show icon1.png? 

// index.html 
{{results.[0].id}} // this shows up as a number and i would like to have the image rendered here 
{{results.[1].id}} 
{{results.[2].id}} 

// app.js 
$scope.submit = function() { 
    var url = 'http://api.com'; 
    $http.get(url) 
    .then(function (response) { 
     $scope.results = response; 
    }); 
    }; 

Answer 1

В зависимости от ответа от вызова API, вы можете установить имя изображения в $ объеме и показать его в теге. Это псевдо-код

if ($scope.result BETWEEN 1 TO 100) 
    $scope.img= ="icon1.png" 


if ($scope.result BETWEEN 101 TO 200) 
    $scope.img= ="icon2.png" 

Etc. МЕЖДУ должен быть заменен на условный оператор

Answer 2

Это можно сделать довольно легко с очень крошечным немного математики. Вы можете использовать Math.floor() для вычисления индекса изображения, которое вы хотите показать. И используйте ng-if, чтобы показать правильную базу изображений по ее индексу.

angular 
 
.module('app', []) 
 
.controller('AppCtrl', function($scope) { 
 
    $scope.images = [ 
 
    { src : 'http://lorempixel.com/400/200/sports/1' }, 
 
    { src : 'http://lorempixel.com/400/200/sports/2' }, 
 
    { src : 'http://lorempixel.com/400/200/sports/3' }, 
 
    { src : 'http://lorempixel.com/400/200/sports/4' }, 
 
    { src : 'http://lorempixel.com/400/200/sports/5' } 
 
    ]; 
 

 
    $scope.result = 60; 
 
    $scope.computedIndex = Math.floor($scope.result/100); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 
    <div ng-controller="AppCtrl"> 
 
    <img ng-repeat="image in images" ng-if="computedIndex === $index" src="{{ image.src }}"> 
 
    </div> 
 
</div>

Обратите внимание, что в этом примере, 100 соответствует определенному интервалу времени в вашем вопросе. Каждый раз, когда ваш сервер отправляет новый result, вы должны пересчитать $scope.computedIndex.