Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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
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>
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... ;-/