2013-04-22 41 views
11

angularjs ve açısal kullanıcı arabirimini kullanarak yeni yapıyorum. Etikete ilgi duyuyorum.AngularJS, onChange veya ngChange öğesini seçin

Bu benim 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> 

ve bu benim 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 = {} 

Eğer select part2 devre dışı görebileceğiniz gibi.

Aşağıdaki durum gibi çalışan bir etkinlik değişikliği nasıl oluşturabilirim?

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

cevap

7

Köşeli, genellikle değişiklikleri tetikleyecek olayları aramıyoruz. Bunun yerine, model değiştiğinde, görünüm bu değişiklikleri yansıtacak şekilde güncellenmelidir.

Bu durumda, modeldeki bir değere bağlı olarak ikinci öğe etkinleştirilmelidir (devre dışı bırakılmamalıdır). İlk seçim menüsüne bağlı model değeri bazı koşulları karşıladığında, ikinci menüyü etkinleştirin. Evet, teknik olarak bir olay var, ama buna değer vermemize gerek yok, hepsi önemli olan modelin değerleri.

İşte bu işe yarayabilecek nasıl basitleştirilmiş örnek:

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

ikinci seçme menünün ng-disabled nitelik temelde olarak değerlendirilirse basit ifadedir "selection.item bir değere sahip değilse beni devre dışı". Bu, daha karmaşık bir ifade ya da işlev olarak kolayca olabilir. Hala seçme üzerinde bir işlevi yürütmek gerekirse

İşte a plunkr based on the code above

+3

Tamam, ve? Sonra ne? – sorin7486

+0

@ sorin7486 seçkinin güncellemeleri üzerindeki $ watch nasıl? – Amicable

+0

evet, işe yarayacaktı, ancak bunu doğrulama için kullanmak istedim, bu yüzden işleri şablonda tutmaya çalışıyordum – sorin7486

7

açısal js seçme kapsamında tanımlanan herhangi bir JavaScript yöntemi çağırabilir ng değiştirme özelliğini destekler. Örnek:

Ancak, en iyi bahsiniz ng-disabled = özniteliğinizdeki $ kapsam ifadesini değerlendirmek olabilir, ör. ng-disabled = "params.id == 'X'".