如果满足条件，则以角度显示图像

Question

I have an API call which returns back a number. Depending on what that number is, I want a specific image to show.

For example if:

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

It can be done quite easily with a very tiny bit of math. You can use Math.floor() to compute the index of the image you want to show. And use ng-if to show the correct image base on its index.

 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> 

Note that in this example, 100 correspond to the interval you specify in your question. Every time your server send back a new result , you must recompute $scope.computedIndex .

Answer 2

Depending on the response from the API call, you can set the image name in $scope and show it in tag. This is a pseudo code

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


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

Etc. BETWEEN has to be replaced by conditional operator