在 Angular/Typescript 中使用 $watch

Question

我有一个 select 框，我需要在其中观察变化，以便动态更改第二个 select 框的值。

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

我如何最好地观看 $ctrl.primaryValue 并根据其他 $ctrl.secondaryOptions.

的负荷

Answer 1

在我的解决方案中，我首先在我的控制器中注入了 $scope。

private dropdownService: DropdownService;
private $scope: any;

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

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

然后仍然在这个构造函数中将一个 $watch 附加到这个范围

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

第一个函数 returns 一个值，angular 将与之比较，如果它发生变化，则执行第二个函数。

希望这会帮助到别人。

Answer 2

另见这个问题：Angularjs: 'controller as syntax' and $watch。

$scope.$watch("$ctrl.primaryValue", (value) => {
    console.log(value)
});

Answer 3

使用 select 标签的 ng-change 属性并调用相应的函数，这将进一步更新辅助 select 中显示的值。

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

内部控制器

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

随着点击事件触发摘要循环，更改将自动反映在辅助 select 标签内。

此致

阿杰

在 Angular/Typescript 中使用 $watch

Using $watch in Angular/Typescript

watch

angularjs

typescript