Невозможно установить значение по умолчанию при выборе опции> при использовании ngChange = "myFunction()" в моем угловом приложении

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> 

И это работает на самом деле здорово.

Теперь мне нужно получить выбранное значение и передать его функции моего контроллера. Поэтому я добавил:

<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.reload = function (item) { 
     console.log(item); 
    } 

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

все работы, но я не есть мое значение по умолчанию больше. Как я могу установить значение по умолчанию и получить измененное значение на основе $ scope controller?

Answer 1

Создайте выбранный объект значения в области вашего контроллера и установите для него свойство id на этом объекте после установки niveaux.

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

Затем в вашем HTML необходимо просто обновить привязку. Вам больше не нужно указывать ng-selected, так как он автоматически привяжет ng-модель с параметром value="{[{niveau.id}]}". Вам просто нужно установить выбранное свойство один раз после загрузки списка 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>