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函数能够使用所选的值。

e.g：

@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);
    }
  }
}]);

它将首先检索所选选项的值，在您的情况下＆＃34; 1＆＃34;。然后，它将使用$parse服务来设置正确的ngModel值。

此后，选择应正确呈现。

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

AngularJs和ASP.NET MVC 5-ng-model重写SELECT选择的OPTION

1 个答案: