VPF::angularjs изменение стиля элемента

JAYBE

Дата 13.5.2013, 08:43 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 220
Регистрация: 27.3.2008

Репутация: -1
Всего: 0

Добрый день.
Есть DOM элемент

Код


<li class="mood">mood<div class="progress"><span></span></div></li>

В котором при обнолении вида, должен проставляться праметра style для span, равный проценту и цвету. Предполагаю что должна вызываться функция при компиляции шаблона.

Код


function PersonEditing($scope) {
    $scope.person = data.clients[0];
}

data.clients[0] - объект, у которого есть параметр mood равный от 0 до 100 типа integer.
При изменение данных контроллер должен возвращать для стиля значение цвета, где зеленый если больше 50 и красный при цвете, меньшем 50-ти.
Должно получиться так:

Код


<li class="mood">mood<div class="progress"><span style="width:50%;color:green;"></span></div></li>

Как это сделать?

Это сообщение отредактировал(а) JAYBE - 13.5.2013, 12:12

DeLuxis

Дата 16.5.2013, 12:07 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 13
Регистрация: 13.6.2012

Репутация: нет
Всего: нет

В контроллере

Код


$scope.getStyle = function(person){
    return {
        "width" : person.mood + '%',
        "color" : person.mood > 50 ? 'red' : 'green'
    }
}

Код


<li class="mood">mood<div class="progress"><span ng-style="getStyle(person)"></span></div></li>

Как-то так.

JAYBE

Дата 17.5.2013, 16:45 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 220
Регистрация: 27.3.2008

Репутация: -1
Всего: 0

Спасибо.
В инете нашёл указания что не следует делать что-либо с DOM в контроллере, а лучше в директиве. Ниже пример:

Код


<html ng-app="ng">
<head>
    <meta charset="utf8">
</head>
    <body ng-controller="MainCtrl" style="width:25%;">
        <input type="text" ng-model="name">
        <span for="">{{name}}</span>
<div ng-style="getStyle()" style="height:12px; width:100px;overflow:hidden;">
    <div ng-mood="mood" style="background-color:green;height:100%;width:0;"></div>
</div>

    </body>
</html>

Код


<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<script>
    
var app = angular.module('ng').controller('MainCtrl', function($scope, $element) {
    $scope.model = { name: 'World' };
    $scope.name = "Felipe12";   
    $scope.getStyle = function(){
    $scope.progressBar();
}
}).directive('ngMood', function () {
    return {
        restrict: 'A',
        //templateUrl: '/partials/template.html',
        link: function (scope, iterStartElement, $attr) {
         scope.progressBar = function() {
                console.log(1)
                var $element = $attr.$$element;
                var parWidth = parseInt( $element.parent().css("width"), 10 );
                var width = scope.name/parWidth*100;
                css = {
                    "width": width+"%",
                    "background-color": function() {
                         if (width>20) {
                            return "green";
                         } else {
                            return "red";
                         }
                    }()
                }
                $element.css(css);

            }
        }
    };
});

</script>

Только вопрос в том, нормально ли что консолится 2 раза при изменении ng-model="name"?
Исходя из моей задачи у меня жолжна директива вызыватсья 1 раз - при изменении значения input-поля.

Это сообщение отредактировал(а) JAYBE - 17.5.2013, 16:47

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »