在Angular/Typescript中使用$ watch

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

<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该负载。

来源

2016-05-31 turoni

@Joe克莱我没有从一开始做这个项目，所以我仍然不知道它的一些东西，但我想我是用角2.0。那肯定不是真的，因为我可以使用$ watch吗？如果不是，你可能会分享一个链接到Angular 2.0中用于此目的的内容吗？ – turoni

如果你使用'$ watch'，你肯定会使用Angular 1 - 在Angular 2中这个服务根本不存在！请参阅http://stackoverflow.com/questions/34569094/what-is-the-angular2-equivalent-to-an-angularjs-watch的答案以获取更多关于“$ watch”已被替换的信息。对不起，驱动编辑，应该给你一些更多的信息！ –

@turoni我认为你不需要$ watch作为ng-options/ng-repeat总是触发摘要循环，只要你的应用程序中发生了点击事件。 – Ajay

使用select变量的ng-change属性，并调用相应的函数，它将进一步更新secondary选择中显示的值。

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

由于点击事件触发消化周期的变化会自动得到反映二次选择标签内。

问候

阿贾伊

来源

2016-05-31 10:02:11 Ajay

谢谢，这确实是一个更好的解决方案。 – turoni

在我的解决方案中，我首先在我的控制器中注入了$ 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;

然后还在里面这个构造附加一个$手表这个范围

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

第一个函数返回一个值，角度会比较，如果它改变执行第二功能。

希望这会帮助别人。

来源

2016-05-31 08:48:26 turoni

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

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

来源

2016-05-31 09:08:28

谢谢我忘了“”标记，从而使用该函数。总而言之，这与普通的Angularjs实现没有什么不同，但是由于翻译打字稿有时很难让我决定分享。 – turoni

在Angular/Typescript中使用$ watch

回答

相关问题