2014-11-23 4 views
0

Я хочу создать динамическую форму с несколькими рядами входов, чтобы она автоматически добавила новую строку, когда фокус наконец. Я не уверен, что лучший способ сделать это, я создал Punker с моим решением, где я в основном добавляю пустой элемент в массив модели, когда обнаруживаю фокус на элементе ввода.ввод динамического ввода Angular.js

в HTML у меня есть:

<input enter="main.addButton()" type="text" class="form-control"> 

моей ввести директиву:

function enter() { 
return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     element.bind('focus', function() { 
      scope.$apply(attrs.enter); 
     }) 
    } 
} 

и контроллер просто apend к модели:

vm.addButton = function() { 
    vm.values.push({name: '', points: null}); 
}; 

Как я могу Append только тогда, когда фокус на последнем элементе? Есть ли лучший способ сделать это? В идеале я хотел бы иметь директиву о том, что я могу сбросить группу входов, и она дублирует их.

Вот мой полный пример кода: http://plnkr.co/edit/0vmgdk8LbfU0j6G6A2Xy?p=preview

ответ

2

Вы можете использовать $last, как:

enter="$last && main.addButton()" 

Вы также можете использовать ngFocus вместо enter:

Укажите пользовательское поведение на фокусное событие.

Просто замените атрибут enter с ng-focus как:

ng-focus="$last && main.addButton()" 
+0

Thx для простого решения, я начал экспериментировать с пользовательскими директивами и забыл о них встраивают в угловой. Еще один вопрос: есть ли какой-нибудь простой способ обнаружить, что когда я нахожусь на пустых входах, и я перехожу к следующему пустым вводам, это не добавит? Потому что я хочу, чтобы вы могли отправить кнопку отправки, например, при изменении ввода с помощью клавиши «tab». – Madbrush

Смежные вопросы