Bind devextreme text value to angular model (on keydown)
I'm just starting out trialling DevExtreme HTML components. Currently, I'm trying to get a simple search form working with AngularJS and DevExtreme.
I want to submit the search form by pressing enter. The problem is the widget seems to only update the angular model if I tab out of the field (presumably onValueChanged event).
In the following code I observe the value of searchData.q changes only when tabbing out of the field. So when the form is submitted in the onKeyChange event, it's using the previous text value. It seems a bit counterintuitive for text boxes to act this way, definitely base angular doesn't work like this with ng-model...
Does anyone know how to fix it so the value is properly bound?
<form id="HeaderSearchForm" ng-submit="search">
<div dx-form="searchFormOptions"></div>
</form>
<pre>
{{searchData | json}}
</pre>
In the angular controller:
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;
}]);
The valueChangeEvent option is helpful in your case. Change it to keydown :
editorOptions: {
mode: 'search',
placeholder: 'Enter a search query',
onKeyDown: function(e) {
//...
},
valueChangeEvent: "keydown"
}
See this sample as well.
链接地址: http://www.djcxy.com/p/31110.html