Label doesn't update on Select widget item change.

[Radu]

Hello.

I have a Select widget that is populated locally, through an array declared in Home.js. An oversimplification of my problem: Whenever a new item is selected from the Select widget, I want a label to be updated with another value, being passed through an Application Parameter. I sort of managed this behaviour, but there's something wrong. When I select another item from the list, the label stays the same. When I select another item from the list, the label changes to the value that should've appeared in the previous case. Every time I select something from the Select widget, the label updates with the value that should've appeared the step before.

Can anyone tell me what am I missing? For reference, this is the array that populates the dropdown:

$scope.view.wdg["select-1"]["list"] = [
    {
      display: "UC2",
      value: "1"
    }
    ,
    {
      display: "UC3",
      value: "2"
    }
    ,
    {
      display: "UC4",
      value: "3"
    }
  ];

My Application Parameter is called maxSteps, and I populate it through 

$scope.app.params["maxSteps"] = 10; //or any other value

I have a function that I set on the Select widget, on the Value Changed attribute, called onSelectChanged(), that tries to change the Application Parameter maxSteps. After the change is made, a label widget is changed with the value taken by the maxSteps property (where I think I'm mistaken).

This label change is done through a scope watch on the maxSteps variable, but it doesn't seem to work.

Does anyone have any suggestions how should I proceed? Thank you very much!

[sebben]

Hi,

you can just connect the maxSteps parameter with the label text property.

Or you can assign the value property of the select widget directly to the text property of the label:

$scope.onSelectChanged= function(){
  $scope.view.wdg["label-1"].text = $scope.view.wdg["select-1"].value;
}

[Radu]

Hi, 

Thank you for your response! Unfortunately, the second option is not feasible, as there's no relationship between the value of the select drop down and the text that I want displayed on the label (which is the maxSteps value)

And the first option still strikes me with the issue: whenever I select another option in the drop down, the label updates with the value that was connected with the previous selection. 

Is there any change method that has both the old value of the property, and the new value as arguments, or something? 

[sebben]

How do you change the maxSteps parameter then?

For me, it changes to the value I select in the select widget.

[Radu]

So I have three elements above, and I want to have a maxSteps property associated to each of them, without duplicating the property. That's why I'm only using it once. I have a direct association somewhere else in the service, where based on UC2/UC3/UC4, you can get the maxSteps for the specific item. What I need to know is how can I populate this maxSteps Application Parameter knowing which element was selected from the select widget, either UC2, UC3 or UC4, and also have its most recent value available, so I can process it further.

I hope this is clear, please let me know if anything doesn't make sense.

[sebben · Accepted solution]

I think I understand what you want to do but I am not sure why you get the last value of the select widget...

So like this it is working for me:

angular.element(document).ready(function() {
  $scope.view.wdg["select-1"].list = [
    {
      display: "UC2",
      value: "1"
    }
    ,
    {
      display: "UC3",
      value: "2"
    }
    ,
    {
      display: "UC4",
      value: "3"
    }
];
});

$scope.onSelectChanged= function(){
  if($scope.view.wdg["select-1"].value == "1")
  $scope.app.params["maxSteps"] = 11;
  else if($scope.view.wdg["select-1"].value == "2")
  $scope.app.params["maxSteps"] = 12;
   else if($scope.view.wdg["select-1"].value == "3")
  $scope.app.params["maxSteps"] = 13;
}

So when I select UC2 the label shows directly 11, for UC3 12 and for UC4 13.

[Radu]

Hi,

OK so what you said is right, it works. The problem was that I populated the value from the Select widget into an Application Parameter only when the widget was accessed (afterEnter), and forgot to also assign it whenever the Select value changed. So everytime 

$scope.$on('$ionicView.afterEnter', function (){
...
}

was called (which I used to populate the dropdown, populate the maxSteps Application Parameter, etc.), it was pulling the last value of the maxSteps Application Parameter, because it only changed whenever the widget was "entered", and not when the value of the Select widget changed.

So your solution naturally works, because it uses the direct value of the Select widget. On my end it wasn't working, because inside the onSelectChanged function I was accessing the value of the Select widget through the Application Parameter, which, as explained above, was only being set within the afterEnter function.

Thank you for helping me on this.