2017-01-10 1 views
1

Я только начинаю тестировать компоненты DevExtreme HTML. В настоящее время я пытаюсь получить простую форму поиска, работающую с AngularJS и DevExtreme.Bind devextreme значение текста для угловой модели (на клавиатуре)

Я хочу отправить форму поиска, нажав enter. Проблема заключается в том, что виджет, по-видимому, обновляет только угловую модель, если я выхожу из поля (предположительно событие onValueChanged).

В следующем коде я наблюдаю за изменениями searchData.q только при внесении вкладок в поле. Поэтому, когда форма представлена ​​в событии onKeyChange, она использует предыдущее текстовое значение. Кажется, что для текстовых ящиков несколько противоречат друг другу, поэтому определенная базовая угловая не работает так, как это происходит с ng-моделью.

Кто-нибудь знает, как исправить это, чтобы значение было правильно привязано?

<form id="HeaderSearchForm" ng-submit="search"> 
    <div dx-form="searchFormOptions"></div> 
</form> 
<pre> 
{{searchData | json}} 
</pre> 

В угловом контроллере:

app.controller('HeaderCtrl', ['$scope', 'authorityService', function ($scope, authorityService) { 
    var execSearch, searchData = {}, searchFormOptions; 

    $scope.searchFormOptions = { 
    formData: searchData, 
    items: [{ 
     dataField: 'q', 
     label: { 
     text: 'Search' 
     }, 
     bindingOptions: { 
     "formData.q": "searchData.q" 
     }, 

     editorOptions: { 
     mode: 'search', 
     placeholder: 'Enter a search query', 
     onKeyDown: function(e){ 
      var keyCode = e.jQueryEvent.which; 
      if (keyCode === 13){ 
      search(); 
      } 
     } 
     } 
    }] 
    }; 

    search = function(){ 
    alert('searching for ' + searchData.q); 
    }; 

    $scope.searchData = searchData; 
    $scope.search = search; 

}]); 
+0

Обнаружили этот вопрос: http://stackoverflow.com/questions/26842378/execute-default-event-before-custom-click-function - попробовал обернуть функцию поиска в таймаут, он работает, значение обновляется до вызов функции, но кажется немного взломанным. Возможно, лучший подход? –

ответ

0

valueChangeEvent опция полезна в вашем случае. Измените его на keydown:

editorOptions: { 
    mode: 'search', 
    placeholder: 'Enter a search query', 
    onKeyDown: function(e) { 
     //... 
    }, 
    valueChangeEvent: "keydown" 
} 

Смотрите эту sample а.

+0

О, я вижу, он установлен как опция. До сих пор это выглядит очень красиво. Спасибо Сергею. –

+0

Добро пожаловать! – Sergey

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