LUI Tab Element issue

[_jespers_]

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?

[rav · Accepted solution]

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>

[_jespers_]

Hi Rikard,

Thank you for the explanation and example. Works perfectly!