AngularJS ng-model converts object to string

Question

I have the following in my HTML file:

    <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:

[
    {
        "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:

{"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!

As such, I can't access it's properties in the other bindings in the rest of the HTML page.

In this case, I want 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

bmleite · Accepted Answer · 2013-02-12 14:01:17Z

4

The problem is that the input's value attribute only accepts strings, not objects (check here). When you do this: value="{{ list }}", you are basically doing input.value = list.toString().

One possible workaround is to use the $index of the ng-repeat directive. Example: http://jsfiddle.net/bmleite/cKttd/

answered Feb 12, 2013 at 14:01

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bmleite Over a year ago

Also, don't use $parent., it can bring you problems in the future.

Liably · Accepted Answer · 2016-04-05 13:04:21Z

3

It is now possible to use ng-value.

Example

<input ng-model="$parent.listGroup" id="listGroup-{{ list.value }}" name="listGroups" ng-value="{{ list }}" type="radio" />

answered Apr 5, 2016 at 13:04

Liably

3571 gold badge3 silver badges15 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:32:04Z

1

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?

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Feb 12, 2013 at 13:53

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

Comments

NoobSter · Accepted Answer · 2016-05-20 16:27:04Z

0

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.

answered May 20, 2016 at 16:27

NoobSter

1,1701 gold badge16 silver badges39 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-model converts object to string

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related