Angular do dependent Select

Question

I want do a dependen select / dropdown.

I obtain this json sample:

[
  {
    "id": 15695,
    "username": "user1",
    "address": {
      "id": 16794,
      "location": "O Treviño de San Pedro"
    },
    "jobs": [
      {
        "id": 7562,
        "name": "ut"
      },
      {
        "id": 7565,
        "name": "temporibus"
      },
      {
        "id": 7603,
        "name": "perspiciatis"
      },
      {
        "id": 7622,
        "name": "optio"
      }  
    ]
  }
]

This is the angular code:

    <select ng-model="industrialist.user" ng-options="user.id as user.username for user in users"></select>
    <select ng-model="industrialist.job" ng-options="job.id as job.name for job in industrialist.user.jobs"></select>

If I do this code, then dependent select works but then i haven't de correct key in industrialist.user.

        <select ng-model="industrialist.user" ng-options="user.username for user in users"></select>

What can I do?

Thanks

confusing...you have 2 versions of ng-model="industrialist.user" but different ng-options. Please explain issue in more detail — charlietfl
– charlietfl, Commented Nov 21, 2013 at 16:12
Yes the problem, is that in second version the dependent select works but then I haven't user.id as key and I need this key. — Marc Morales Valldepérez
– Marc Morales Valldepérez, Commented Nov 21, 2013 at 16:15

Zack Argyle · Accepted Answer · 2013-11-21 16:50:58Z

1

I believe what you need to do is save the whole user rather than the just the id. You can get the id out later if you need it.

<select ng-model="industrialist.user" ng-options="user.id as user.username for user in users"></select>
<select ng-model="industrialist.job" ng-options="job.id as job.name for job in industrialist.user.jobs"></select>

Here is a working fiddle. JSFiddle

edited Nov 21, 2013 at 16:50

answered Nov 21, 2013 at 16:16

Zack Argyle

8,4674 gold badges32 silver badges38 bronze badges

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

4 Comments

Marc Morales Valldepérez Over a year ago

The problem is then in form send all user and I need only user.id

Zack Argyle Over a year ago

@MarcMoralesValldepérez I changed the fiddle, it works just like you wanted, I think. Yeah?

Marc Morales Valldepérez Over a year ago

Yes in fiddle works but there are this error: Cannot read property 'user' of undefined. First time $scope.industrialist.user is undefined.

Zack Argyle Over a year ago

Use an ng-init or something.

Collectives™ on Stack Overflow

Angular do dependent Select

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related