How to enable/disable Angular Kendo Combobox programatically or even by html markup

Question

I am trying to disable/enable kendo Combobox based on the text enterted in searchString text box. If text is entered, then combobox should be disabled and if no text is there in searchString then only the combobox should be enabled. Here is the DOJO Link

<input type='search' ng-model='searchString' />
<div style="padding-top: 1em;">
    <h4>Remote data</h4>
    <select kendo-combo-box k-enable='!(searchString && searchString.length > 0)'
            k-placeholder="'Select product'"
            k-data-text-field="'ProductName'"
            k-data-value-field="'ProductID'"
            k-filter="'contains'"
            k-auto-bind="false"
            k-min-length="3"
            k-data-source="productsDataSource"
            style="width: 100%" >
    </select>
</div>

I know the functionality is possible with jQuery,

$('#id').kendoComboBox({ enabled: true });

But how to do this with Angular JS? I can keep $watch() in angular controller for searchString, but the question is how to disable the combobox with Angular JS code?

Answer 1

Got the solution.

Kendo UI creates a new $scope variable when we provide the value for the kendo-combo-box.
As per below, myCombobox

<select kendo-combo-box='myCombobox' 
            k-placeholder="'Select product'"
            k-data-text-field="'ProductName'"
            k-data-value-field="'ProductID'"
            k-filter="'contains'"
            k-auto-bind="false"
            k-min-length="3"
            k-data-source="productsDataSource">
</select>

We can use the same $scope variable in the controller to disable it.

$scope.myCombobox.enable(false);

I have updated the same DOJO