Ng değişimini tetiklemek için ng-init nasıl yapabilirim?

Question

Angular'i öğrenmeye yeni başladım. Aşağıdaki giriş öğelerini bazı hediyelerden biri ile doldurması gereken bir <select> öğesi vardır.

Bu benim görüşüm.

<select 
    ng-model="selection" 
    ng-options="preset.name for preset in presets" 
    ng-init="selection=presets[0]" 
    ng-change="select()"></select> 

<input ng-model="name" type="text"/> 
<textarea ng-model="description"></textarea> 

Bu benim denetleyicim.

$scope.presets = [ 
    { name: 'Lorem ipsum', description: 'Dolor sit amet.' }, 
    { name: 'Consectetur', description: 'Adipisicing elit.' }, 
    { name: 'Sed do',  description: 'Eiusmod tempor.' }, 
]; 

$scope.select = function() { 
    $scope.name  = $scope.selection.name; 
    $scope.description = $scope.selection.description; 
}; 

Sayfayı yüklediğimde, seçilen ilk seçeneği görebiliyorum. Ancak, seçim alanları manuel olarak değiştirilene kadar giriş alanları boş kalır. Neden Açısal, giriş alanlarını otomatik olarak ilk sırada ayarlamaz ve bu konuda ne yapabilirim?

Answer 1

Başlangıçta metin alanlarını ayarlamamasının nedeni, select() çağrılana kadar $ scope.name ve $ scope.description için hiçbir bağlayıcı kurulum olmamasıdır.

$scope.init = function(selected) {  
    $scope.selection = selected; 
    $scope.name = $scope.selection.name; 
    $scope.description = $scope.selection.description; 
} 
$scope.select = function() { 
    $scope.name  = $scope.selection.name; 
    $scope.description = $scope.selection.description; 
}; 

Ve HTML'nize: Eğer kontrolör işlevinde başlangıçta yapabilecegime

<select 
    ng-model="selection" 
    ng-options="preset.name for preset in presets" 
    ng-init="init(presets[0])" 
    ng-change="select()"></select> 

Alternatif Yöntem: Alternatif

, giriş alanları bağlamak olabilir aynı seçim modeli. Bu şekilde, seçim modeli kapsamda güncellendiğinde, tüm ilişkili görünümleri güncelleyecektir.

değiştirme modeli için 'selection.name' ve 'selection.description': Seçilen model arasında iki yönlü bağlayıcı kurulum zaten olduğundan

<input ng-model="selection.name" type="text"/> 
<textarea ng-model="selection.description"></textarea> 

artık select() fonksiyonu için gerek yoktur ve giriş alanları.