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

Question

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

0

У меня есть 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;
    });
  };

Alex 30 сен. 2015, в 06:02

Источник

1

проверка, шоу-и-переключатель.
lintmouse 30 сен. 2015, в 03:57
0

Поделитесь с нами некоторым кодом, хотите ли вы сохранить его в контроллере, в представлении, на заводе или где вы хотите выполнить эти условия?
Jonathan Solorzano 30 сен. 2015, в 03:59

Теги:

javascript

angularjs

2 ответа

Ещё вопросы

Поделитесь с нами некоторым кодом, хотите ли вы сохранить его в контроллере, в представлении, на заводе или где вы хотите выполнить эти условия?

Sapher · Answer 1 · 2015-09-30T02-32-00.000Z

Это можно сделать довольно легко с очень маленькой частью математики. Вы можете использовать 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.

user3506746 · Answer 2 · 2015-09-30T02-42-00.000Z

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

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


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

И т.д. BETWEEN необходимо заменить условным оператором