Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

jesper_snihs
Contributor

LUI Tab Element issue

I have an issue with checkbox input elements together with the LUI Tab element.

Javascript file:

define( ["qlik", "text!./template.html"],

    function ( qlik, template ) {

        return {

            template: template,

            support: {

                snapshot: true,

                export: true,

                exportData: false

            },

            paint: function () {

                return qlik.Promise.resolve();

            },

            controller: ['$scope', function ( $scope ) {

                $scope.isAllSelected = false;

                $scope.categories = [ { "name": "Sport", "selected": false } , {"name": "General", "selected": false } ];

                $scope.toggleAll = function(){

                    var toggleStatus = $scope.isAllSelected;

                    $.each($scope.categories, function(key, value) {

                        value.selected = toggleStatus;

                    });

                };

                $scope.optionToggled = function(){

                    $scope.isAllSelected = $scope.categories.every(function(item){return item.selected;});

                }

            }]

        };

    } );

The following template file works fine:

<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">

    <input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected" /> Select All

    <table>

        <tr ng-repeat="item in categories">

            <td><input type="checkbox" ng-model="item.selected" ng-change="optionToggled()"/></td>

            <td><span q-translation="{{item.name}}"></span></td>

        </tr>

    </table>

</div>

But for some reason when I add the LUI Tab Element to the template, it stops working as it should:

<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">

    <lui-tab-view>

        <lui-tabset>

            <lui-tab ref="tab1">Tab</lui-tab>

        </lui-tabset>

        <lui-tab-content ref="tab1">

            <input type="checkbox" ng-click="toggleAll()" ng-model="isAllSelected" /> Select All

            <table>

                <tr ng-repeat="item in categories">

                    <td><input type="checkbox" ng-model="item.selected" ng-change="optionToggled()"/></td>

                    <td><span q-translation="{{item.name}}"></span></td>

                </tr>

            </table>

        </lui-tab-content>

    </lui-tab-view>

</div>

Any idea why this happens?

1 Solution

Accepted Solutions
rav
New Contributor II

Re: LUI Tab Element issue

Hi Jesper!

It is because lui-tab-view creates it's own scope. Therefore when you type ng-model="isAllSelected" in the template a new scope variable is created that is isolated from the parent scope.

Anyway the fix is to make isAllSelected into an object. You can read more about the issue in this stack overflow:

javascript - AngularJS: radio checkbox model doesn't change - Stack Overflow

Here is a working example:

define( ["qlik", "text!./template.html"],

    function ( qlik, template ) {

        return {

            template: template,

            support: {

                snapshot: true,

                export: true,

                exportData: false

            },

            paint: function () {

                return qlik.Promise.resolve();

            },

            controller: ['$scope', function ( $scope ) {

                $scope.isAllSelected = {value: false};

                $scope.categories = [ { "name": "Sport", "selected": false } , {"name": "General", "selected": false } ];

                $scope.toggleAll = function(){

                    $.each($scope.categories, function(key, value) {

                         value.selected = $scope.isAllSelected.value;

                    });

                };

                $scope.optionToggled = function(){

                    $scope.isAllSelected.value = $scope.categories.every(function(item){return item.selected;});

           }

       }]

    };

} );

<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">

    <lui-tab-view>

        <lui-tabset>

            <lui-tab ref="tab1">Tab</lui-tab>

        </lui-tabset>

        <lui-tab-content ref="tab1">

            <input type="checkbox" ng-change="toggleAll()" ng-model="isAllSelected.value" /> Select All

            <table>

                <tr ng-repeat="item in categories">

                    <td><input type="checkbox" ng-model="item.selected" ng-change="optionToggled()"/></td>

                    <td><span q-translation="{{item.name}}"></span></td>

                </tr>

            </table>

        </lui-tab-content>

    </lui-tab-view>

</div>

2 Replies
rav
New Contributor II

Re: LUI Tab Element issue

Hi Jesper!

It is because lui-tab-view creates it's own scope. Therefore when you type ng-model="isAllSelected" in the template a new scope variable is created that is isolated from the parent scope.

Anyway the fix is to make isAllSelected into an object. You can read more about the issue in this stack overflow:

javascript - AngularJS: radio checkbox model doesn't change - Stack Overflow

Here is a working example:

define( ["qlik", "text!./template.html"],

    function ( qlik, template ) {

        return {

            template: template,

            support: {

                snapshot: true,

                export: true,

                exportData: false

            },

            paint: function () {

                return qlik.Promise.resolve();

            },

            controller: ['$scope', function ( $scope ) {

                $scope.isAllSelected = {value: false};

                $scope.categories = [ { "name": "Sport", "selected": false } , {"name": "General", "selected": false } ];

                $scope.toggleAll = function(){

                    $.each($scope.categories, function(key, value) {

                         value.selected = $scope.isAllSelected.value;

                    });

                };

                $scope.optionToggled = function(){

                    $scope.isAllSelected.value = $scope.categories.every(function(item){return item.selected;});

           }

       }]

    };

} );

<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">

    <lui-tab-view>

        <lui-tabset>

            <lui-tab ref="tab1">Tab</lui-tab>

        </lui-tabset>

        <lui-tab-content ref="tab1">

            <input type="checkbox" ng-change="toggleAll()" ng-model="isAllSelected.value" /> Select All

            <table>

                <tr ng-repeat="item in categories">

                    <td><input type="checkbox" ng-model="item.selected" ng-change="optionToggled()"/></td>

                    <td><span q-translation="{{item.name}}"></span></td>

                </tr>

            </table>

        </lui-tab-content>

    </lui-tab-view>

</div>

jesper_snihs
Contributor

Re: LUI Tab Element issue

Hi Rikard,

Thank you for the explanation and example. Works perfectly!

Community Browser