1

I have a select box where I need to watch for changes so I can dynamically change the value of my second select box. 

<select ng-model="$ctrl.primaryValue"
        ng-options="key as value for (key, value) in $ctrl.primaryOptions">
</select>
<br /><br />
<select ng-model="$ctrl.secondaryValue"
        ng-options="key as value for (key, value) in $ctrl.secondaryOptions">
</select>

How would I best watch $ctrl.primaryValue and according to that load in other $ctrl.secondaryOptions.

turoni
  • 1,345
  • 1
  • 18
  • 37
  • @Joe Clay I didn't make this project from the start so I'm still not sure about some things of it but I thought I was using Angular 2.0. Is that certainly not true since I can use $watch? If not can you maybe share a link to what is used in Angular 2.0 for this purpose? – turoni May 31 '16 at 09:20
  • 1
    If you're using `$watch`, you're definitely using Angular 1 - that service doesn't exist at all in Angular 2! See the answers to http://stackoverflow.com/questions/34569094/what-is-the-angular2-equivalent-to-an-angularjs-watch for more information on what `$watch` has been replaced with. Sorry for the drive-by edit, should have left you some more info! – Joe Clay May 31 '16 at 09:26
  • @turoni i think you don't need $watch as ng-options/ng-repeat always triggers the digest cycle whenever a click event occurs inside your application. – Ajay May 31 '16 at 09:32
  • @Ajay I think I get what you mean (the select tag already provides data-binding?). But how can I otherwise attach a function that will update when primaryValue changes? – turoni May 31 '16 at 09:36
  • 1
    @turoni use ng-change attribute of for updating secondarySelect value instead of using $watch, see my answer for more info... – Ajay May 31 '16 at 10:04

3 Answers3

4

In my solution I first injected the $scope in my controller. 

private dropdownService: DropdownService;
private $scope: any;

public static $inject: string[] = [DropdownService.IID, '$scope'];

constructor(dropdownService: DropdownService, $scope: any) {
    this.dropdownService = dropdownService;
    this.$scope = $scope;

And then still inside this constructor attached a $watch to this scope

this.$scope.$watch(
    (): string => {
        return this.primaryValue;
    },
    (newValue: string, oldValue: string):void => {
        console.log("the value ", oldValue, " got replaced with ", newValue);
    }
);

The first functions returns a value that angular will compare to and if it changes execute the second function.

Hope this'll help someone out.

turoni
  • 1,345
  • 1
  • 18
  • 37
2

See also this question: Angularjs: 'controller as syntax' and $watch.

$scope.$watch("$ctrl.primaryValue", (value) => {
    console.log(value)
});
Community
  • 1
  • 1
Niels Steenbeek
  • 4,692
  • 2
  • 41
  • 50
  • Thanks I was forgetting the "" marks thus the use of the function. Also all in all this wasn't that different from normal Angularjs implementation but since the translation to typescript can sometimes be difficult to make I decided to share this. – turoni May 31 '16 at 09:14
2

Use ng-change attribute of select tag and call the respective function which will further update the value shown inside secondary select.

<select ng-model="$ctrl.primaryValue"
        ng-options="key as value for (key, value) in $ctrl.primaryOptions" ng-change="$ctrl.updateSecondaryOptions()">
</select>

Inside controller

public updateSecondaryOptions(): void {
    // update the secondary options value here
}

As click event triggers digest cycle, the change will automatically get reflected inside secondary select tag.

Regards

Ajay

turoni
  • 1,345
  • 1
  • 18
  • 37
Ajay
  • 4,773
  • 3
  • 23
  • 36