topic Re: LUI Tab Element issue in Integration, Extension & APIs

LUI Tab Element issue

_jespers_ — Wed, 15 Nov 2017 17:37:06 GMT

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?

Re: LUI Tab Element issue

rav — Thu, 16 Nov 2017 09:38:40 GMT

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>

Re: LUI Tab Element issue

_jespers_ — Fri, 17 Nov 2017 07:24:06 GMT

Hi Rikard,

Thank you for the explanation and example. Works perfectly!