2 Replies Latest reply: Nov 17, 2017 2:24 AM by Jesper Snihs RSS

    LUI Tab Element issue

    Jesper Snihs

      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
          Rikard Samvik

          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>