Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.01.2017, 01:05
Аспирант
Отправить личное сообщение для TestUser013 Посмотреть профиль Найти все сообщения от TestUser013
 
Регистрация: 13.07.2013
Сообщений: 94

Добавить класс при фокусе
Доброго времени суток.
Есть шаблон template.htm примерно с такой структурой, но сильно накрученный другими элементами (которые не имеют отношения к вопросу):
<div>
 <div class="test">
    <label for="name">name</label>
    <input type="text" name="name" ng-model="item.name">
 </div>
 <div class="test">
    <label for="desc">desc</label>
    <input type="text"  name="desc" ng-model="item.desc">
 </div>
 <div class="test">
    <label for="count">count</label>
    <input type="text"  name="count" ng-model="item.count">
 </div>
 <div class="test">
    <label for="label">label</label>
    <input type="text"  name="label" ng-model="label">
 </div>
</div>


Подскажите, как правильно добавлять и удалять класс для блока div class="test" при фокусе дочернего input?

В рамках одного div и input все понятно... Вот так:

<div class="test" ng-class="{'focused': focused}>
    <label for="name">name</label>
    <input type="text" name="name" ng-model="item.name" ng-focus="focused=true" ng-blur="focused=false">
 </div>


Но как быть в случаи наличия десятка разных input?
Ответить с цитированием
  #2 (permalink)  
Старый 06.01.2017, 07:18
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

TestUser013,
$scope.focused = {name: false, desc: false, count: false, label: false}

<div class="test" ng-class="{'focused': focused.name}>
    <label for="name">name</label>
    <input type="text" name="name" ng-model="item.name" ng-focus="focused.name=true" ng-blur="focused.name=false">
...
 </div>
Ответить с цитированием
  #3 (permalink)  
Старый 06.01.2017, 12:11
Аспирант
Отправить личное сообщение для TestUser013 Посмотреть профиль Найти все сообщения от TestUser013
 
Регистрация: 13.07.2013
Сообщений: 94

destus,
Это получается, что для каждого input надо свою переменную? А нельзя как-то через $element или $parent?
Ответить с цитированием
  #4 (permalink)  
Старый 06.01.2017, 12:54
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

TestUser013,
Можно.
$scope.focusInput= function($event )
	{
            angular.element($event.target).parent().addClass('focused');    
	};
  	$scope.blurInput= function($event )
	{
	    angular.element($event.target).parent().removeClass('focused');    
	};

<div class="test">
    <label for="name">name</label>
    <input type="text" name="name" ng-model="item.name" ng-focus="focusInput($event)" ng-blur="blurInput($event)">
 </div>
Ответить с цитированием
  #5 (permalink)  
Старый 06.01.2017, 12:59
Аспирант
Отправить личное сообщение для TestUser013 Посмотреть профиль Найти все сообщения от TestUser013
 
Регистрация: 13.07.2013
Сообщений: 94

Спасибо!



Чей-то плюсики не ставятся. Вы должны добавить отзыв кому-то ещё, прежде чем сможете снова добавить его destus
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
при нажатие на кнопку добавить блок (картинку) avi1984 (X)HTML/CSS 2 07.04.2016 14:13
Как добавить класс, если div виден пользователю? sovsem-nub Элементы интерфейса 4 20.02.2016 18:16
Очень просто код, событие клик и добавить класс walker1232 Общие вопросы Javascript 4 30.01.2016 23:42
добавить и удалить класс maximus2011 Элементы интерфейса 2 04.06.2013 12:18
При повторном фокусе добавляются события blur и keydown sdaww Events/DOM/Window 2 05.07.2012 15:15