在AngularJS中，选择onChange或ngChange

AngularJS, select onChange or ngChange

本文关键字：onChange ngChange 选择 AngularJS      更新时间：2023-09-26

我是新来的使用angularjs和角用户界面。我对标签很感兴趣。

这是我的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>

and this my 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.

angular-js select支持ng-change属性，该属性可以调用scope中定义的任何javascript方法。例子:

然而，你最好的选择可能只是计算ng-disabled=属性中的$scope表达式，例如ng-disabled="params "。id == 'X'".

在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属性是一个简单的表达式，基本上计算为"disable me if selection.item没有值"。也可以是一个更复杂的表达式或函数。

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

相关文章：