jQuery UI Widgets Forums Plugins AngularJS jqxDropDownList with checkboxes – AngularJS two-way data binding

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 8 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • dbed
    Participant

    Is it possible to get two-way data binding working with the jqx-drop-down-list with checkboxes enabled (i.e. multiselect dropdown)?

    I’ve tried referencing my scope object with the ng-model directive but cannot get the controller to see the changes when the user selects different values:

    <jqx-drop-down-list jqx-settings="settings" ng-model="testmodel"></jqx-drop-down-list>

    Thank you

    • This topic was modified 8 years ago by  dbed.

    Dimitar
    Participant

    Hello dbed,

    Please refer to the section Using ngModel of the help topic jQWidgets Integration with AngularJS. Please also take a look at our AngularJS integration demo featuring jqxDropDownList with checkboxes: http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/angular-dropdownlist/angularjs-dropdownlist-checkboxes.htm?light.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    dbed
    Participant

    Hi Dimitar,
    In the example I see the expression for the checkedItems in the source:

    <div style="font-size: 13px; font-family: Verdana; margin-top: 10px;">{{checkedItems}}</div>

    However, I’m not seeing any value get displayed. Also if I look in F12 developer tools, I don’t see the scope variable getting updated either. It just stays as “”

    Thanks again


    Dimitar
    Participant

    Hi dbed,

    Thank you for your feedback. Here is an updated, properly working, version of our demo:

    <!DOCTYPE html>
    <html ng-app="demoApp">
    <head>
        <link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="../../../scripts/angular.min.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
        <script type="text/javascript" src="../../../scripts/demos.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
            demoApp.controller("demoController", function ($scope) {
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
                ];
                $scope.dropDownListInstance = {};
                $scope.checkedItems = "";
                $scope.eventData = "";
    
                // Create a jqxListBox
                $scope.settings = {
                    width: 200, source: source, checkboxes: true, height: 25,
                    created: function (args) {
                        var instance = args.instance;
                        $scope.dropDownListInstance = instance;
                        instance.checkIndex(0);
                        instance.checkIndex(1);
                        instance.checkIndex(2);
                        instance.checkIndex(5);
                    }
                };
    
                $scope.checkChange = function (event) {
                    var args = event.args;
                    if (args.checked) {
                        $scope.eventData = "Checked: " + args.label;
                    }
                    else {
                        $scope.eventData = "Unchecked: " + args.label;
                    }
    
                    var items = $scope.dropDownListInstance.getCheckedItems();
                    var checkedItems = "";
                    $.each(items, function (index) {
                        if (index < items.length - 1) {
                            checkedItems += this.label + ", ";
                        }
                        else checkedItems += this.label;
                    });
                    $scope.checkedItems = checkedItems;
                };
            });
        </script>
    </head>
    <body ng-controller="demoController">
        <jqx-drop-down-list jqx-settings="settings" jqx-on-check-change="checkChange(event)"></jqx-drop-down-list>
        <div style="font-size: 13px; font-family: Verdana; margin-top: 20px;">{{eventData}}</div>
        <div style="font-size: 13px; font-family: Verdana; margin-top: 10px;">{{checkedItems}}</div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    dbed
    Participant

    Thanks Dimitar, I was able to get it working based on the info you provided.

    One more question about this approach though: I have the jqxDropDown widget inside a repeating div (using ng-repeat). When the checkChange() function gets called, would it be possible to also pass the index of the repeating div as well? I’ve tried including $index but it is always coming up as undefined (I’m guessing maybe because jqx-on-check-change isn’t a native angularjs directive?).

    Thanks again for the help


    Dimitar
    Participant

    Hi dbed,

    You can get information about the HTML element (div) that triggered the checkChange event from the event.target argument. If this does not help you, please share your code and we will try to assist you in another way.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.