드롭 다운의 paticular 옵션 선택 AngularJs

Question

ASP.NET MVC4에서 AngularJs를 사용하고 있습니다. 먼저 면도기 구문을 사용하여 드롭 다운을 생성합니다.

@Html.DropDownList("packageName", (IEnumerable<SelectListItem>)ViewBag.packageName, "No Data Available", new { ng_model = "subForm.packageName" }) 

는 그럼 난 이렇게 내 드롭 다운을 다시 채우기 오전 :

$scope.subForm.packageName = '1'; 

하지만이 :

이제

$('#packageName').empty(); 
$('#packageName').append($('<option />').val('').text('Select Package')); 
$('#packageName').append($('<option />').val(1).text('Package 1')); 

내가 옵션을 설정하려고이 같은 내 각 컨트롤러에서 선택할 수 잘못된 옵션을 생성하십시오. 오류는 다음과 같습니다.

<select ng-model="subForm.packageName" name="packageName" id="packageName" class="ng-pristine ng-valid"> 
    <option value="? string:1 ?"></option> 
    <option value="">Select Package</option> 
    <option value="1">Package 1</option> 
</select> 

왜 첫 번째 옵션이 생성됩니까? 이것에 대한 해결책이 있습니까?

Answer 1

select 지시어가 구현되어 있기 때문에 연결된 모델의 값을 옵션에 매핑하기 위해 사용 가능한 옵션 값을 알아야합니다.
ngOptions을 사용하여 원하는 결과를 얻을 수 있습니다. 그것은 아주 쉽게 :

<!-- In the VIEW: --> 
<select id="packageName" ng-model="subForm.packageName" 
     ng-options="packageName for packageName in packageNames"> 
    <option value="">Select Package</option> 
</select> 

/* In the CONTROLLER: */ 
$scope.packageNames = [...]; 

$scope.subForm = { 
    packageName: $scope.packageNames[0] 
}; 

---

참조, 또한,이 short demo.