Question

我的问题与此问题非常相似：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属性，则会被忽略。

我是棱角分明的新人，但我发现这真的很烦人。

由于我正在使用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应该已经做好了。

Answer 1

是的，行为与输入相同，这就是＆＃34;双向数据绑定＆＃34;的工作原理。

无论如何，您可以使用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

Answer 2

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

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

您可以在该博客中找到更多信息：

http://blog.glaucocustodio.com/2014/10/20/init-ng-model-from-form-fields-attributes/

如果链接死亡，您需要在声明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>

AngularJS - 当使用ng模型时，将忽略select / dropdownlist上的Value属性

2 个答案: