Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.09.2014, 11:51
Интересующийся
Отправить личное сообщение для dtzscln Посмотреть профиль Найти все сообщения от dtzscln
 
Регистрация: 16.07.2014
Сообщений: 15

radiobutton + checkbox mix
Нужен элемент, который смесь радиобаттона и чекбокса.
Т.е. из ряда вариантов можно выбрать только один (как у радиобаттона), но с выбранного элемента можно снять выделение (как у чекбоксов).
Делаю через радобаттоны, навешиваю на них прослушивание клика, если елемент checked - делаю его не checked, вроде всё логично:

<input type="radio" ng-model="someData" value="0" radio-check>


app.directive("radioCheck", function() {
    return {
        require: "ngModel",
        link: function(scope, elem, attrs, ngModel) {
            elem.on("click", function(e) {
                if (elem.prop("checked") === true) {
                    ngModel.$modelValue = undefined;
                    ngModel.$viewValue = false;
                }
            });
        }
    }
});


Что я делаю не так?
Ответить с цитированием
  #2 (permalink)  
Старый 18.09.2014, 09:10
Новичок на форуме
Отправить личное сообщение для artur-pro.z Посмотреть профиль Найти все сообщения от artur-pro.z
 
Регистрация: 30.05.2013
Сообщений: 3

можно манипулировать не checked-атрибутом, а присвоить модели someData значение null - тогда все radio-инпуты станут "uncheched", т.е. ни один не будет выбран (в том и фишка ангуляра- работать с объектами, а не с html)
http://plnkr.co/edit/4xossl8AglvPMRriV9XN?p=preview

кстати, elem.prop("checked") всегда возвращает true
Ответить с цитированием
  #3 (permalink)  
Старый 18.09.2014, 10:15
Интересующийся
Отправить личное сообщение для dtzscln Посмотреть профиль Найти все сообщения от dtzscln
 
Регистрация: 16.07.2014
Сообщений: 15

Спасибо, работает.
А как можно сделать вашу директиву универсальной? Что бы без привязки к значеню ng-model
Т.к. у разных групп радиобаттонов ng-model будет разным
Пробовал заменить
scope.radio = null;

на
ngModel.$modelValue = null;

не работает
Ответить с цитированием
  #4 (permalink)  
Старый 18.09.2014, 13:13
Новичок на форуме
Отправить личное сообщение для artur-pro.z Посмотреть профиль Найти все сообщения от artur-pro.z
 
Регистрация: 30.05.2013
Сообщений: 3

ngModel.$setViewValue(null);
ngModel.$render(); 
scope.$apply()
Ответить с цитированием
  #5 (permalink)  
Старый 27.12.2014, 13:06
Новичок на форуме
Отправить личное сообщение для varz62 Посмотреть профиль Найти все сообщения от varz62
 
Регистрация: 27.12.2014
Сообщений: 1

ребята может кто подскажет как такое на jquery реализовать
Ответить с цитированием
  #6 (permalink)  
Старый 27.12.2014, 13:52
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от varz62
такое на jquery реализовать
не jQuery язык, а JavaScript. На этом это так:
<script>
var uncheckRadio = (function() {
  var current;
  return function(element) {
    if(current == element) {
      element.checked = false;
      current = null;
    } else
      current = element;
  }
})();
</script>
<form>
  <div>
    <input type="radio" name="product" value="1" onclick="uncheckRadio(this);" />
    <span>Шоколад</span>
  </div>
  <div>
    <input type="radio" name="product" value="2" onclick="uncheckRadio(this);" />
    <span>Мороженое</span>
  </div>
  <div>
    <input type="radio" name="product" value="3" onclick="uncheckRadio(this);" />
    <span>Груша</span>
  </div>
  <div>
    <input type="radio" name="product" value="3" onclick="uncheckRadio(this);" />
    <span>Вафля</span>
  </div>
</form>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
checkbox = checkbox Слейп jQuery 2 30.01.2013 15:24
Не могу получить состояние checkbox-а POMAH-UST Элементы интерфейса 2 08.10.2012 07:43
jqgrid tree and checkbox gaz2003 jQuery 0 17.12.2011 15:59
Функция disable для нескольких checkbox allforweb Элементы интерфейса 4 19.12.2010 17:51
как правильно передвать имя radiobutton в функции boris2000 Элементы интерфейса 2 03.08.2010 21:16