AngularJS 输入ng-model/默认值冲突

Question

如果我用

<input type="text" value="asdf">

然后我看到一个默认值为 asdf

的输入

但如果我这样做

<input data-ng-model="modelname" type="text" value="asdf">

然后我可以在控制器中使用 modelname 但默认值不再显示。我怎样才能同时使用这两种东西？

工具：

离子
AngularJS

Answer 1

通常您会在控制器内部设置模型名称的默认值。可以稍微作弊并使用 'ngInit' 指令，尽管 angular 文档不鼓励在 ngRepeat 之外使用它。

<input data-ng-model="modelname" data-ng-init="modelname = 'asdf'" type="text">

来自 angular 文档的相关声明

"The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope."

Answer 2

在您的控制器中设置 $scope.modelname = "asdf"。您不需要 value 属性。

Answer 3

与其在视图中设置绑定到模型的元素的默认值，不如在控制器上下文中设置这些默认值。

例如，<input ng-model="yourModelName" type="text"> 需要您的控制器中有一个名为 $scope.yourModelName = 'whateveryouwant' 的合作伙伴。

一旦加载了输入 DOM 元素，它就会检查包含该模型的控制器并填写它。这就是为什么现在双向数据绑定很棒的原因。在真实世界的实例中，您可以根据 API 命中的 return 填充包含用户详细信息的表单，无需任何映射。

只是为了向您展示力量.. 这个 returns 数据并使用名为 myUser

的对象将其绑定到范围

somethingService.getSomething(id).then(function(res) {
    $scope.myUser = res.data;
}

您现在可以初始化 myUser 对象可能包含在视图中的字段，例如..

<input type="text" ng-model="myUser.name">
<input type="text" ng-model="myUser.address">
<input type="text" ng-model="myUser.gender">

Answer 4

使用这个

$scope.foo={};
$scope.foo.modelname = "asdf";

而不是这个

$scope.modelname = "asdf"

AngularJS 输入ng-model/默认值冲突

AngularJS input ng-model / default value conflict

angularjs

ionic-framework