如果我将一个简单的输入文本框值设置为下面的"bob",则使用AngularJS . 如果添加了 ng-model
属性,则不会显示该值 .
<input type="text"
id="rootFolder"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
任何人都知道一个简单的工作来默认这个输入的东西并保持 ng-model
?我尝试使用带有默认值的 ng-bind
,但这似乎也不起作用 .
10 回答
这是期望的行为,您应该在控制器中定义模型,而不是在视图中定义 .
Vojta描述了“Angular方式”,但是如果你真的需要做这个工作,@urbanek最近发布了一个使用ng-init的解决方法:
https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ
覆盖输入指令确实可以完成这项工作 . 我对Dan Hunsaker的代码进行了一些小改动:
在尝试在没有ngModel属性的字段上使用
$parse().assign()
之前添加了对ngModel的检查 .更正了
assign()
函数参数顺序 .Angular方式
正确的Angular方法是在表单模板中编写单页面应用程序AJAX,然后从模型中动态填充它 . 默认情况下,模型不会从表单填充,因为模型是单一的事实来源 . 相反,Angular将采用另一种方式并尝试从模型中填充表单 .
但是,如果没有时间从头开始
如果你有一个应用程序编写,这可能涉及一些相当沉重的架构更改 . 如果您尝试使用Angular来增强现有表单,而不是从头开始构建整个单页应用程序,则可以使用指令从表单中提取值并在链接时将其存储在作用域中 . 然后,Angular会将范围中的值绑定回表单并保持同步 .
使用指令
您可以使用相对简单的指令从表单中提取值并将其加载到当前范围 . 这里我定义了一个initFromForm指令 .
您可以看到我已经定义了几个后备来获取模型名称 . 您可以将此指令与ngModel指令结合使用,或者根据需要绑定到$ scope以外的其他指令 .
像这样用它:
请注意,这也适用于textareas,并选择下拉列表 .
Update: 我的原始答案涉及让控制器包含DOM感知代码,这会破坏Angular约定以支持HTML . @dmackerman在评论我的答案时提到了指令,直到现在我完全错过了 . 有了这个输入,这是在不破坏Angular or HTML约定的情况下执行此操作的正确方法:
还有一种方法可以获得两者 - 获取元素的值并使用它来更新指令中的模型:
然后:
在将模型设置为其值之前,您当然可以修改上述指令以使用
value
属性执行更多操作,包括使用$parse(attrs.value, scope)
将value
属性视为Angular表达式(尽管我可能使用不同的[custom]属性,就个人而言,标准HTML属性始终被视为常量) .此外,在Making data templated in available to ng-model也存在类似的问题,这也可能是有意义的 .
如果您使用AngularJs ngModel指令,请记住
value
属性 does not bind on ngModel field 的值 . 您必须自己初始化它并且最好的方法是,这是对早期答案的略微修改......
不需要$ parse
您好,您可以尝试以下方法初始化模型 .
在这里,您可以双向初始化文本框的ng-model
- With use of ng-init
- With use of $scope in js
问题是您必须将ng-model设置为您要设置ng值/值的父元素 . 正如Angular所说:
例如:这是一个执行的代码:
注意:在上面这种情况下,我已经对ng-model和值进行了JSON响应,我只是将另一个属性作为“MarketPeers”添加到JS对象中 . 因此,模型和值可能根据需要而有所不同,但我认为这个过程将有助于同时拥有ng-model和value,但不能将它们放在同一个元素上 .
我有类似的问题 . 我无法使用
value="something"
进行显示和编辑 . 我必须在我的<input>
中使用下面的命令以及声明的模型 .我在对象
userDataToPass
中有数据列表,我需要显示和编辑的项目是pinCode
.为此,我提到this YouTube video