2 Replies Latest reply: Mar 2, 2017 10:15 AM by Vegard Bakke RSS

    A simple widget, using standard <select>

    Vegard Bakke

      Hi all,

       

      I'm trying to make a simple widget, displaying the values of a dimension in a <select> element.

      Simple enough, but naturally I'd like to make the selection pass the selection to Qlik Sense.

       

      I've tried various variants.  Here is one:

      <select ng-change="data.rows[this.value].dimensions[0].select()"  >

        <option selected value="" >--Please make a selection--</option>

        <option ng-repeat="row in data.rows"

           value="{{$index}}"

        >{{row.dimensions[0].qText}}</option>

      </select>

       

      Angular says that I have to use ngModel. But using ng-model="data", the dropdownlist turns empty as soon as I select something.

       

       

      Can anyone spot the flaw?

       

      Cheers,

      Vegard

        • Re: A simple widget, using standard <select>
          Jose Fernandez

          Hi Vegard,

          That's right, ng-change requires an ng-model to be bound with. But if you set ng-model="data", this means that when you select a value in your dropdown list, the ng-change event will be fired and it will try to override 'data' like this:

          data = data.rows[this.value].dimensions[0].select()

          Which means that you will lose your original 'data' model.

           

          Try assigning the ng-model to a new variable with ngInit. Something like (didn't tried it though):

          <select ng-init="selectedValue = ''" ng-model="selectedValue" ng-change="data.rows[this.value].dimensions[0].select()"  >

          <option selected value="" >--Please make a selection--</option>

            <option ng-repeat="row in data.rows"

               value="{{selectedValue}}"

            >{{row.dimensions[0].qText}}</option>

          </select>

            • Re: A simple widget, using standard <select>
              Vegard Bakke

              Using ng-init and ng-model did indeed remove the error message:

                    Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngChange', can't be found!

               

              However, the ng-change event never fires. I tried a few methods:

               

              <select

                ng-init="selectedValue = ''"

                ng-model="selectedValue"

                ng-change="console.log('ng-change', this.value); data.rows[this.value].dimensions[0].select()"

                qva-activate="console.log('qva-activate', this.value); data.rows[this.value].dimensions[0].select()"

                click="console.log('click', this.value); data.rows[this.value].dimensions[0].select()"

                onclick="console.log('onclick', this.value); data.rows[this.value].dimensions[0].select()"

              >

               

                <option selected="" value="">--Please make a selection--</option>

               

                <option

                    ng-repeat="row in data.rows"

                    value="{{$index}}"

                    data-dim="row"

                    >{{row.dimensions[0].qText}}</option>

               

              </select>

               

               

              I got a response from the 'onclick' event:

                 onclick 3

              But it is followed by:

                 Uncaught ReferenceError: data is not defined at HTMLSelectElement.onclick (analysis:1)


              And I totally agree with the error message. I just don't understand how to get it in scope... ;-/