javascript - 选择变更 Angular 实现？

angularjs有一个称为onchanges的内置指令，该指令将侦听select或其他内容中的更改，并允许您在更改时执行函数。

我多么希望这是有角度的。目前，我对ngmodel有更好的了解，并了解如何使用主题来实现以下目标。

我有一些城市：

<div id="venueFilterParams" ngModelGroup="venueFilterParams">
          <!-- need to add default values from url-->
          <select [ngModel]="citySelect"
                  name="citySelect"
                  id="citySelect"
                  class="form-control">
            <option *ngFor="let city of cities" value="{{city}}">{{city}}</option> <!--come back and wire up-->
          </select>

以及一些社区：

 <select [ngModel]="neighborhoodSelected"
                  name="neighborhood"
                  id="neighborhood"
                  class="form-control">
            <option *ngFor="let neighborhood of neighborhoodlist" value="{{neighborhood}}">{{neighborhood}}</option>
          </select>

如果用户选择的城市不是指向该页面的URL中传递的城市，（默认情况下，我尚未建该城市）

我需要我的应用程序才能访问我的数据库，并使用该城市的邻居重新填充邻居选择选项。

我可以做的所有事情都很好，我想找出的是将侦听城市选择并运行执行上述操作的代码。

现在[ngModel] = citySelect;不会自行更新，我必须等待提交单击以捕获值，但是[[ngModel）] = citySelect并在主题中收听citySelect变量呢？

我将继续努力，但您的建议非常感谢！

最佳答案

Angular具有类似的指令，称为（change）或（ngModelChange）。

如果要基于url设置城市的初始值，则需要双向数据绑定。对于双向数据绑定，（ngModelChange）是一种方法。

因此，在您的城市中选择：

<select [ngModel]="citySelect"
    (ngModelChange)="onCityChange($event)"
    name="citySelect"
    id="citySelect"
    class="form-control">
  <option *ngFor="let city of cities" [value]="{{city}}">{{city}}
  </option> <!--come back and wire up-->
</select>

然后，在组件中定义onCityChange：

public onCityChange(chosenCity) {
  console.log(chosenCity);
  // populate neighborhoodlist based on chosenCity
}

关于javascript - 选择变更 Angular 实现？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45065451/