AngularJS,选择onChange或ngChange
问题描述:
我是新的使用angularjs
和角度用户界面。我对标签感兴趣。AngularJS,选择onChange或ngChange
这是我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.
答
有了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
没有一个值禁用我”。这可能是一个更复杂的表达式或函数。
答
angular-js select支持ng-change属性,它可以调用在范围中定义的任何javascript方法。 例如:
然而,你最好的选择可能只是评估你的ng-disabled =属性中的$ scope表达式,例如, ng-disabled =“params.id =='X'”。
好吧,如果我仍然需要在选择执行的功能?那又怎么样? – sorin7486 2014-06-24 17:33:33
@ sorin7486如何在$ watch上选择更新的变量? – Amicable 2015-02-04 10:52:37
是的,这将工作,但我想用这个验证,所以我试图保持在模板中的东西 – sorin7486 2015-02-05 13:42:12