角度アプリでngChange = "myFunction（）"を使用すると、select>オプションでデフォルト値を設定できません。

Question

角度アプリを作成しています。私はコントローラの$scope.ecole.niveauidからのデフォルト値を設定する必要があります。 はそうするために、私はこのコードを書いた：

<select class="form-control" name="niveau"> 
     <option value="{[{niveau.id}]}" 
       ng-repeat="niveau in niveaux" 
       ng-selected="niveau.id == ecole.niveauid"> 
       {[{niveau.libelle}]} 
     </option> 
</select> 

をそして、それは本当に素晴らしい作品。

これで、選択した値を取得し、それをコントローラの機能に渡す必要があります。 だから私は、コメントを追加しました：

$scope.reload = function (item) { 
     console.log(item); 
    } 

    $scope.niveaux = [ 
     { 
      "id": 1, 
      "libelle": "level1" 
     }, 
     { 
      "id": 2, 
      "libelle": "level2" 
     }, 
     { 
      "id": 3, 
      "libelle": "level3" 
     }]; 
$scope.ecole.niveauid = 3; 

すべての作業を、私はもう私のデフォルト値を持っていない：

<select class="form-control" 
      ng-model="niveau" 
      ng-change="reload(niveau)"> 

      <option value="{[{niveau.id}]}" 
        ng-repeat="niveau in niveaux" 
        ng-selected="niveau.id == ecole.niveauid"> 
        {[{niveau.libelle}]}</option> 
</select> 

を私のコントローラでは、私がしました。 デフォルト値を設定し、$ scope controllerに基づいて変更された値を取得するにはどうすればよいですか？

Answer 1

niveauxが設定された後に、コントローラのスコープで選択した値オブジェクトを作成し、このオブジェクトのidプロパティを設定します。

$scope.niveaux = [ 
    { 
     "id": 1, 
     "libelle": "level1" 
    }, 
    { 
     "id": 2, 
     "libelle": "level2" 
    }, 
    { 
     "id": 3, 
     "libelle": "level3" 
    }]; 

$scope.selectedValue = {id: "2"}; //selected value onload (pass your selected value here) 

$scope.reload = function(){ 
    var selectedId = $scope.selectedValue.id; 
    //do something 
} 

次に、あなたのバインディングを更新するだけです。 ng-selectedは、オプション値value="{[{niveau.id}]}"でng-modelを自動的にバインドするので、これ以上指定する必要はありません。 Niveauxリストをロードした後、選択したプロパティを一度設定するだけです。

<select class="form-control" 
      ng-model="selectedValue.id" 
      ng-change="reload()"> 

      <option value="{[{niveau.id}]}" 
        ng-repeat="niveau in niveaux"> 
        {[{niveau.libelle}]}</option> 
</select>