각도 응용 프로그램에서 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 
} 

그런 다음 HTML에서 바인딩을 업데이트하면됩니다. 옵션 값 value="{[{niveau.id}]}"을 사용하여 ng-model을 자동으로 바인딩하므로 ng-selected를 더 이상 지정할 필요가 없습니다. 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>