DevExtreme Vue - Change Options

All operations with widget options are carried out through the scope properties these options are bound to. To bind a widget option to a scope property, use the bindingOptions object as shown in the following code. Note that the scope property name in this object is enclosed in quotes.

HTML
<div ng-controller="Controller">
    <div dx-check-box="{
        bindingOptions: {
            value: 'checkBoxValue'
        }
    }"></div>
</div>
JavaScript
function Controller ($scope) {
    $scope.checkBoxValue = true;
}

Now, if you change the checkBoxValue scope property in code, the CheckBox will receive the changes. And vice versa, if an end user selects the CheckBox in the UI, the checkBoxValue scope property will be updated.

If you bind a widget to a collection, the widget gets updated only when an object is added to or removed from this collection. To make the widget listen for changes even in the fields of any object in the collection, configure the bindingOptions object as follows.

HTML
<div ng-controller="Controller">
    <div dx-chart="{
        bindingOptions: {
            dataSource: {
                <!-- Enables deep tracking of changes -->
                deep: true,
                <!-- Specifies which scope property to track changes in -->
                dataPath: 'fruitsData'
            }
        },
        series: { argumentField: 'fruit', valueField: 'total' }
    }"></div>
</div>
JavaScript
function Controller ($scope) {
    $scope.fruitsData = [
        { fruit: 'Oranges', total: 10 },
        { fruit: 'Apples', total: 15 },
        { fruit: 'Bananas', total: 9 }
    ];
}

The code above forces the widget to use the $watch listener instead of the default $watchCollection listener. Note that the use of the $watch listener may impact the widget's peformance.

NOTE
We strongly do not recommend binding a widget to the DevExtreme DataSource using the bindingOptions object. The DataSource contains internal circular links that get updated during its lifetime. Tracking changes in them by means of the AngularJS Framework may lead to unexpected results. Instead of using the bindingOptions object, simply assign the scope property with the DataSource to the dataSource option of the widget. If you nevertheless decided to use the bindingOptions object, set its deep field to false explicitly.

Watch Video

See Also