2013-06-07 2 views
4

У меня есть веб-страница, где я создаю форму из динамических json-данных, полученных от сервера. Недавно я разработал его с помощью KnockoutJS. После создания формы у меня также есть требование обновить форму, выполнив запрос ajax с сервера, каждый раз, когда значение в форме было изменено. Вот fiddle Вы видите, что событие изменения происходит только при размытии (не при нажатии клавиши). Например, если текстовое поле имеет значение 15, а пользователь нажимает обратное пространство, а затем снова вводит 5, это означает 2 нажатия клавиш, но значение не было изменено. Все идет нормально.

Проблема 1 Теперь я конвертирую код в AngularJS. Я пытаюсь поймать событие изменения на $ watch of scope. Но, похоже, часы запускаются каждый раз, когда происходит нажатие клавиши, хотя после нескольких значений нажатия клавиш значение не изменяется. Вот fiddle, как я пытаюсь. Однако эта проблема связана только с полями ввода текста.

Проблема 2 Я создаю радиогруппу в ручном режиме, например. если данные json будут изменены, нам также потребуется обновить html. Как я могу это сделать каким-то динамичным способом. Я смог сделать это с помощью KnockoutJS.

Задача 3 Почему ng-hide не работает?

ответ

5

Fix для задачи 1 было ввести директиву для события размытости Ниже приведен код моей директивы:

angular.module('app', []).directive('ngModelOnblur', function() { 
return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, elm, attr, ngModelCtrl) { 
     if (attr.type === 'radio' || attr.type === 'checkbox') return; 

     elm.unbind('input').unbind('keydown').unbind('change'); 
     elm.bind('blur', function() { 
      scope.$apply(function() { 
       ngModelCtrl.$setViewValue(elm.val()); 
      }); 
     }); 
    } 
}; 

});

вы можете увидеть рабочую скрипку здесь http://jsfiddle.net/akeelrehman/GNJtn/1/

Я не мог понять, решение задачи 2, так что я перестал использовать входы радио.

+2

Вы также можете просто использовать 'нг-модели-параметры =«{updateOn: „размывание“}»' – howMuchCheeseIsTooMuchCheese

+0

@howMuchCheeseIsTooMuchCheese Это то, что я искал! :) Спасибо! –

1

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

Смотреть это ответ на аналогичный вопрос, который имеет пример кода, который делает работу: https://stackoverflow.com/a/15723514/1034002