Javascript AngularJS ng-model 将对象转换为字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14832405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS ng-model converts object to string
提问by BanksySan
I have the following in my HTML file:
我的 HTML 文件中有以下内容：
<td style="width: 200px;">
<span ng-repeat="list in listGroups">
<label for="{{ list.description }}" />{{ list.description }}</label>
<input ng-model="$parent.listGroup" id="listGroup-{{ list.value }}" name="listGroups" value="{{ list }}" type="radio" />
</span>
</td>
The listGroups contains:
listGroups 包含：
[
{
"description": "New by Territory",
"group": "product",
"type": "new"
},
{
"description": "New by Genre",
"group": "genre",
"type": "new"
},
{
"description": "Charts by Territory",
"group": "product",
"type": "chart"
},
{
"description": "Charts by Genre",
"group": "genre",
"type": "chart"
}
]
When I click a radio button the listGroup (set in ng-model) becomes, for example:
当我单击一个单选按钮时，listGroup（在 ng-model 中设置）变为，例如：
{"description":"New by Genre","group":"genre","type":"new"}
When I look at listgroup with typeof $scope.listGroup, I see that it is a string now!
当我查看带有 的 listgroup 时typeof $scope.listGroup，我发现它现在是一个字符串！
As such, I can't access it's properties in the other bindings in the rest of the HTML page.
因此，我无法在 HTML 页面其余部分的其他绑定中访问它的属性。
In this case, I want ng-show="listGroup.group == 'genre'"
在这种情况下，我想要 ng-show="listGroup.group == 'genre'"
What's happening here and, more importantly, how do I make it do what I want it to do, which is keep the object as an object?
这里发生了什么，更重要的是，我如何让它做我想要它做的事情，即保持对象作为一个对象？
Thanks all
谢谢大家
Dave
戴夫
回答by bmleite
The problem is that the input's valueattribute only accepts strings, not objects(check here). When you do this: value="{{ list }}", you are basically doing input.value = list.toString().
问题是输入的value属性只接受字符串，而不接受对象（检查这里）。当你这样做时：value="{{ list }}"，你基本上是在做input.value = list.toString()。
One possible workaround is to use the $indexof the ng-repeatdirective. Example: http://jsfiddle.net/bmleite/cKttd/
一个解决办法可能是使用$index的的ng-repeat指令。示例：http: //jsfiddle.net/bmleite/cKttd/
回答by Liably
It is now possible to use ng-value.
现在可以使用ng-value.
Example
例子
<input ng-model="$parent.listGroup" id="listGroup-{{ list.value }}" name="listGroups" ng-value="{{ list }}" type="radio" />
<input ng-model="$parent.listGroup" id="listGroup-{{ list.value }}" name="listGroups" ng-value="{{ list }}" type="radio" />
回答by Anders Ekdahl
Why do you want to have an object as an ng-model? That is what's causing your listGroup variable to become a string, since ng-model only works with strings. If you have a complex object that you want to use with ng-model, you should create a directive and implement a parser and a formatter, like this: How to do two-way filtering in angular.js?
为什么要将对象作为 ng-model？这就是导致您的 listGroup 变量成为字符串的原因，因为 ng-model 仅适用于字符串。如果你有一个复杂的对象想要与 ng-model 一起使用，你应该创建一个指令并实现一个解析器和一个格式化程序，就像这样：如何在 angular.js 中进行双向过滤？
回答by NoobSter
You could also JSON.parse(object-in-string) , but I think I like @bmleite solution better. Just throwing this out there -- incase someone has a different use-case.
你也可以 JSON.parse(object-in-string) ，但我想我更喜欢@bmleite 解决方案。只是把它扔在那里 - 以防有人有不同的用例。
