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.

來源

2013-04-22 yozawiratama

有了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

來源

2014-01-03 04:29:22 joemaller

好吧，如果我仍然需要在選擇執行的功能？那又怎麼樣？ – sorin7486 2014-06-24 17:33:33

@ sorin7486如何在$ watch上選擇更新的變量？ – Amicable 2015-02-04 10:52:37

是的，這將工作，但我想用這個驗證，所以我試圖保持在模板中的東西 – sorin7486 2015-02-05 13:42:12

angular-js select支持ng-change屬性，它可以調用在範圍中定義的任何javascript方法。例如：

然而，你最好的選擇可能只是評估你的ng-disabled =屬性中的$ scope表達式，例如， ng-disabled =「params.id =='X'」。

來源

2013-05-31 15:47:41

AngularJS，選擇onChange或ngChange

回答

相關問題