AngularJS, select onChange or ngChange

Question

我是新手使用 angularjs 和 angular 用户界面。我对 <ng-tags-input> 标签感兴趣。

这是我的 html：

<select id="part1" ui-select2 ng-model="params.id" style="width: 200px;">
    <option value="">Provinsi</option>
    <option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
    ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="part2" ui-select2 ng-model="params2.id" style="width: 200px;" ng-disabled="true">
    <option value="">Kabupaten</option>
    <option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
    ng-selected="y.id == params.id">{{y.text}}</option>
</select>

这是我的app.js代码:

$http.get('json/provinsiData.json').success(function(datax) {
    $scope.prov = datax;
});

//part2 data
$http.get('json/acehData.json').success(function(datay) {
    $scope.kab = datay;
});

$scope.params = {}
$scope.params2 = {}

正如您所看到的，select part2 被禁用了。

我该如何创建一个像下面条件一样工作的事件更改呢？

if selected option of part1 is index 0
then select part2 disabled = false and load json part2 data.

- yozawiratama

Answer 1

AngularJS的选择器支持ng-change属性，该属性可以调用任何在作用域中定义的JavaScript方法。

例如：

然而，最好的选择可能是在您的ng-disabled=属性中评估一个$scope表达式，例如ng-disabled="params.id == 'X'"。

- Roger Goerke

Answer 2

在Angular中，我们通常不是寻找事件来触发更改。相反，当模型发生变化时，视图应该更新以反映这些变化。

在这种情况下，第二个元素应该根据模型中的值启用（而不是禁用）。当与第一个选择菜单相关联的模型值满足某些条件时，启用第二个菜单。是的，技术上有一个事件，但我们不需要关心它，重要的是模型的值。

以下是一个简化的示例展示了如何实现：

<select ng-model="selection.item">
  <option value="">Clothing</option>
  <option ng-repeat="item in clothes">{{ item }}</option>
</select>

<select ng-model="selection.size" ng-disabled="!selection.item">
  <option value="">Size</option>
  <option ng-repeat="size in sizes">{{ size }}</option>
</select>

第二个选择菜单的 ng-disabled 属性是一个简单的表达式，基本上评估为 "如果 selection.item 没有值，则禁用我"。这可能是更复杂的表达式或函数。

这里是一个基于上面代码的plunkr

- joemaller

---

好的，如果我仍然需要在选择时执行一个函数？那怎么办？ - sorin.silaghi

@sorin7486，对于选择更新的变量，加一个$watch怎么样？ - Amicable

是的，那样可以工作，但我想将其用于验证，所以我试图保持模板中的内容。 - sorin.silaghi