AngularJs和ASP.NET MVC 5 - NG-模型首要選擇我以前這裏的問題選擇的選項

Question

繼：

AngularJs and ASP.NET MVC 5 - ng-model overriding textbox value

我現在有一個選擇相同的問題。

我有一個使用ASP.NET MVC 5構建的表單，使用@Html.EnumDropDownListFor用我的模型填充表單（例如，在表單導航或服務器端驗證失敗後）。

我現在介紹了一個使用Angular（1.4.7）的客戶端函數，這意味着SELECT現在使用ng-model進行修飾，以使Angular函數能夠使用選定的值。

例如爲：

@Html.EnumDropDownListFor(m => m.MyEnum, 
          new { @class="form-control", ng_model="obj.myEnum" }) 

添加ng-model現在覆蓋所選擇的選項從MVC模式設定時重新加載頁面。

查看瀏覽器的源顯示所選的選項從MVC模式設置正確，但有它被選中多了一種選擇：

<select class="form-control ng-pristine ng-valid ng-touched" 
     name="MyEnum" ng-model="obj.myEnum"> 
    <option value="? undefined:undefined ?"></option> 
    <option value="0">Please select</option> 
    <option selected="selected" value="1">Option1</option> 
    <option value="2">Option2</option> 
</select> 

我怎樣才能避免這種情況，使Option1住宿選擇？

使用我之前問題中的指令不起作用，因爲SELECT沒有值屬性。

的ng_init也沒有一個SELECT

Answer 1

在這裏工作是一個指令，它應該在你的情況下幫助：

app.directive('initSelect', ['$parse', function($parse) { 
    return { 
    link: function(scope, element, attrs) { 

     var select = element[0]; 

     if (!select.options.length || !attrs.ngModel) return; 

     var initialValue = select.options[select.selectedIndex].value; 

     $parse(attrs.ngModel).assign(scope, initialValue); 
    } 
    } 
}]); 

它首先檢索所選選項的值，你的情況「 1" 。然後它將使用$parse服務來設置正確的ngModel值。

之後，選擇應該正確呈現。

演示：http://plnkr.co/edit/2VvkGfsPW94SPSVW6iUN?p=preview