AngularJS,选择onChange或ngChange

时间:2013-04-22 08:26:29

标签: javascript angularjs

我是使用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>

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

2 个答案:

答案 0 :(得分:7)

angular-js select支持ng-change属性,该属性可以调用范围中定义的任何javascript方法。 示例:

然而,您最好的选择可能只是评估ng-disabled =属性中的$ scope表达式,例如: ng-disabled =“params.id =='X'”。

答案 1 :(得分:7)

使用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没有值”则禁用我。这可能很容易成为更复杂的表达或功能。

这是a plunkr based on the code above