Question

我有一个选择框，我需要注意更改，以便我可以动态更改第二个选择框的值。

<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);
    }
);

第一个函数返回一个angular将与之比较的值，如果它更改则执行第二个函数。

希望这会帮助别人。

Answer 2

另请参阅此问题：Angularjs: 'controller as syntax' and $watch。

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

Answer 3

使用select标签的ng-change属性并调用相应的功能，这将进一步更新辅助选择内显示的值。

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

当点击事件触发摘要周期时，更改将自动反映在辅助选择标记内。

此致

的Ajay

在Angular / Typescript中使用$ watch

3 个答案: