Конвертировать код jquery в угловой код

0

Я создаю приложение погоды с использованием ионного углового, мое приложение почти выполнено, но я хочу добавить некоторые дополнения. Этот код jQuery я хочу, чтобы он был преобразован в угловое:

var tempCelsius = Math.round(data.current_observation.temp_c);
        if (tempCelsius < 15){
            $("#temp").css("color", "#00DFF9");
        } else if (tempCelsius < 20){
            $("#temp").css("color", "#21DBE1");
        } else if (tempCelsius < 25) {
            $("#temp").css("color", "#A0FF74");
        } else if (tempCelsius < 30) {
            $("#temp").css("color", "##FEB900");
        } else if (tempCelsius < 35) {
            $("#temp").css("color", "##FE7400");
        } else if (tempCelsius < 40) {
            $("#temp").css("color", "#FE5100");
        } else if (tempCelsius > 45) {
            $("#temp").css("color", "#FE0000");
        } else if (tempCelsius > 50) {
            $("#temp").css("color", "##FE0000");
        } else if (tempCelsius > 55) {
            $("#temp").css("color", "#E8250C");
        }


        $("#temp").html(Math.round(tempCelsius )+ "&#176;C");

Я стараюсь сделать так, чтобы он был угловатым, но он не работает:

    $scope.tempco =function(tempco){    
    var tempCelsius = Math.round(weather.currently.temperature);
        if (tempCelsius < 15){
            $("#temp").css("color", "#00DFF9");
        } else if (tempCelsius < 20){
            $("#temp").css("color", "#21DBE1");
        } else if (tempCelsius < 25) {
            $("#temp").css("color", "#A0FF74");
        } else if (tempCelsius < 30) {
            $("#temp").css("color", "##FEB900");
        } else if (tempCelsius < 35) {
            $("#temp").css("color", "##FE7400");
        } else if (tempCelsius < 40) {
            $("#temp").css("color", "#FE5100");
        } else if (tempCelsius > 45) {
            $("#temp").css("color", "#FE0000");
        } else if (tempCelsius > 50) {
            $("#temp").css("color", "##FE0000");
        } else if (tempCelsius > 55) {
            $("#temp").css("color", "#E8250C");
        }       
    }

html:

{{tempco(weather.currently.temperature)| number:1}} &deg;
  • 0
    вам нужно вернуть значение из вашей функции tempco . в настоящее время вы ничего не возвращаете, поэтому tempco(weather.currently.temperature) будет неопределенным
  • 0
    Вы получили какую-либо ошибку?
Показать ещё 2 комментария
Теги:

4 ответа

1

вам нужно написать директиву для работы с dom

angularjs

YourApp.directive('tempCelsius', function () {
    return {
        scope: {
            tempCelsius:'=', //or @
        }
        restrict: 'A',
        link: function (scope, element) {
            var $el = $(element); //need jquery js. (don't recommend use jquery & angularjs)
            var tempCelsius = scope.tempCelsius;
            if (tempCelsius < 15){
                $el.css("color", "#00DFF9");
            } else if (tempCelsius < 20){
                $el.css("color", "#21DBE1");
            } else if (tempCelsius < 25) {
                $el.css("color", "#A0FF74");
            } else if (tempCelsius < 30) {
                $el.css("color", "##FEB900");
            } else if (tempCelsius < 35) {
                $el.css("color", "##FE7400");
            } else if (tempCelsius < 40) {
                $el.css("color", "#FE5100");
            } else if (tempCelsius > 45) {
                $el.css("color", "#FE0000");
            } else if (tempCelsius > 50) {
                $el.css("color", "##FE0000");
            } else if (tempCelsius > 55) {
                $el.css("color", "#E8250C");
            }   
        }
    }
});

HTML

<span temp-celsius="12"> //use @
<span temp-celsius="info.tempCelsius"> //use =, value in scope
Поделиться
0

Попробуйте вот так:

$scope.tempco =function(tempco){    
    var tempCelsius = Math.round(weather.currently.temperature);
        if (tempCelsius < 15){
            return "#00DFF9";
        } else if (tempCelsius < 20){
            return "#21DBE1";
        } else if (tempCelsius < 25) {
            return "#A0FF74";
        } else if (tempCelsius < 30) {
            return "##FEB900";
        } else if (tempCelsius < 35) {
            return "##FE7400";
        } else if (tempCelsius < 40) {
            return "#FE5100";
        } else if (tempCelsius > 45) {
            return "#FE0000";
        } else if (tempCelsius > 50) {
            return "##FE0000";
        } else if (tempCelsius > 55) {
            return "#E8250C";
        }       
    }

и html:

  <div style="background-color:{{tempco(weather.currently.temperature)}}">
  {{weather.currently.temperature}}
  </div>

играть на скрипке

Поделиться
0

попробуй это

 $scope.tempco =function(tempco){ 
 $scope.colorCode = "";   
var tempCelsius = Math.round(weather.currently.temperature);
    if (tempCelsius < 15){
        $scope.colorCode = "#00DFF9";
    } else if (tempCelsius < 20){
        $scope.colorCode = "#21DBE1";
    } else if (tempCelsius < 25) {
        $scope.colorCode = "#A0FF74";
    } else if (tempCelsius < 30) {
        $scope.colorCode = "#FEB900";
    } else if (tempCelsius < 35) {
        $scope.colorCode = "#FE7400";
    } else if (tempCelsius < 40) {
        $scope.colorCode = "#FE5100";
    } else if (tempCelsius > 45) {
        $scope.colorCode = "#FE0000";
    } else if (tempCelsius > 50) {
        $scope.colorCode = "#FE0000";
    } else if (tempCelsius > 55) {
        $scope.colorCode = "#E8250C";
    }       
}

$scope.tempco(parameter); //pass any value as parameter while calling

HTML

<div ng-style="{'color': colorCode}"> 
   {{tempco(weather.currently.temperature)| number:1}}&deg;
</div>
Поделиться
0

Если значение не отображается, ваша функция ничего не возвращает. Добавьте оператор возврата в конце. Что касается стиля css, у углового есть директива ngStyle, которая будет полезна для вас.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню