AngularJs 和 ASP.NET MVC 5 - ng-model 覆盖 SELECT selected OPTION

Question

继续我之前的问题：

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

我现在遇到了与 SELECT 相同的问题。

我有一个使用 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 没有 value 属性。

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