AngularJS - 当使用 ng-model 时，选择/下拉列表上的值属性被忽略答案

【问题标题】：AngularJS - Value attribute on an select/dropdownlist is ignored when there is a ng-model usedAngularJS - 当使用 ng-model 时，选择/下拉列表上的值属性被忽略
【发布时间】：2015-01-27 17:24:26
【问题描述】：

我的问题与这个问题非常相似：AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?

考虑到这个答案：https://stackoverflow.com/a/20522955/1598891

我想知道是否有办法对<select> 进行同样的处理？

如果将 ng-model 设置为 <input type="text">，则输入的值将重置为 null（因为 Angular）

下拉列表也有类似的行为。如果您在 <select> 中设置了“选定选项”，如果您还具有 ng-model 属性，它将被忽略。

我是 Angular 新手，但我发现这真的很烦人。

由于我正在使用 ASP MVC，如果我这样做，MVC 已经定义了所有值：

@Html.DropDownListFor(model => model.MyModel, 
    new SelectList(/*...*/), 
    "Select an options", 
    new { @class = "form-control", 
          ng_model = "MyModelProperty"})

我知道我可以这样做：

ng_model = @String.Format("myModel = {0}", Model.MyModelProperty)

但是重复这些信息会有点烦人，因为 MVC 应该已经正确地做到了。

【问题讨论】：

标签： javascript asp.net asp.net-mvc angularjs

【解决方案1】：

我最终使用了这个 Angular.JS 指令：

https://github.com/glaucocustodio/angular-initial-value

以防万一链接失效，您需要将此代码放在 Angular 应用程序声明之前：

var initialValueModule = angular.module('initialValue', [])
.directive('initialValue', function() {
  return{
    restrict: 'A',
    controller: ['$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse){

      var getter, setter, val, tag;
      tag = $element[0].tagName.toLowerCase();

      val = $attrs.initialValue || $element.val();
      if(tag === 'input'){
        if($element.attr('type') === 'checkbox'){
          val = $element[0].checked ? true : undefined;
        } else if($element.attr('type') === 'radio'){
          val = ($element[0].checked || $element.attr('selected') !== undefined) ? $element.val() : undefined;
        } 
      }

      if($attrs.ngModel){
        getter = $parse($attrs.ngModel);
        setter = getter.assign;
        setter($scope, val);
      }
    }]
  };
});

/* commonjs package manager support (eg componentjs) */
if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
  module.exports = initialValueModule;
}

那么你可以这样做：

<script>
var app = angular.module('myApp', ['initialValue']); //Pass the directive to the app
</script>

<body ng-app="myApp">
  <!-- Add the "initial-value" directive to the html input -->
  <input type="text" value="John" name="text" initial-value ng-model="text" id="text"/>
</body>

【讨论】：

【解决方案2】：

是的，行为与输入相同，这就是“双向数据绑定”的工作原理。

无论如何，您可以使用 ng-selected 强制选择，例如：

在你的控制器中：

$scope.selected = null;

在 html 中：

<select ng-model="model.selected">
  <option value="a">a</option>
  <option value="b" ng-selected="true">b</option>
  <option value="c">c</option>
</select>

但是注意，这只会强制选择 html，模型的值不会更新

在 plunk 上查看：http://plnkr.co/edit/uV3md09CYX0mUVfIy4b2

要了解更多数据绑定的工作原理，请参阅：ng-selected not working in select element

【讨论】：

所以你的意思是没有办法对 Angular 说 当我创建模型时请停止更改我的下拉列表的选定值而不使用 @ 987654325@ 属性？因为它也会感觉像是一项工作完成了两次。我不想编辑任何东西（除了我的 JS 中的一个函数，比如链接的 SO 帖子），因为 MVC 已经在我的下拉列表中设置了选定的值......