0

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 变量呢？

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

4

3 回答 3

1

在 Angular (v2+) 中，您可以直接绑定到 javascript DOM 事件。对于选择，change只要值更改，就会触发事件。因此，您可以像这样设置和响应事件：

<select [(ngModel)]="citySelect" (change)="onCityChange()">

private onCityChange(): void {
    /* Your custom code */
}
于 2017-07-12T19:10:52.877 回答
0

您可以使用ngModelChange：

<select [(ngModel)]="citySelect" (ngModelChange)="myCitySpecificFunction()">

在您的组件中：

private myCitySpecificFunction(): void {
    console.log('City updated to ' + this.citySelect);
}

请注意，ngModelChange必须在 html 元素之后 ngModel列出，否则不会注册。

于 2017-07-12T19:07:53.957 回答
0

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
}
于 2017-07-12T19:16:59.723 回答