將devextreme文本值綁定到角模型（在keydown上）

我剛開始試用DevExtreme HTML組件。目前，我正在嘗試使用AngularJS和DevExtreme一個簡單的搜索表單。將devextreme文本值綁定到角模型（在keydown上）

我想通過按回車來提交搜索表單。問題是，小部件似乎只更新角模型，如果我標籤出來的字段（大概onValueChanged事件）。

在下面的代碼中，我觀察到searchData.q的值僅在Tab鍵出現字段時發生更改。因此，在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; 

}]);

來源

2017-01-10 Richard G

發現這個問題：http://stackoverflow.com/questions/26842378/execute-default-event-before-custom-click-function - 試圖包裝在超時搜索功能，它的工作原理，價值更新之前函數調用，但似乎有點哈克。也許更好的方法？ –

的valueChangeEvent選項是在你的情況有所幫助。將其更改爲：

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

看到這個sample爲好。

來源

2017-01-10 18:02:12 Sergey

哦，我明白了，它被設置爲一個選項。這看起來像是一個非常好的框架。謝謝謝爾蓋非常感謝。 –

歡迎您！ – Sergey

將devextreme文本值綁定到角模型（在keydown上）

回答

相關問題