Fill a Select field with a Json call back using AngularJs

Question

I'm a pretty new in this area (one mounth) and I'm developing application with angularJs, I'm getting back Json requisition with a list, I have to put the name ({{empresa.name }}) when the user select I get the ID({{empresa.IdEmpresa}}).

I want use ng-repeat for that, something like (ng-repeat="empresa in empresas").

I'm getting the Json with the list from the JavaController, my Entity is named Empresa, I declare a empty object on angular Like that ( $scope.empresas = {}) and give the callback to this emprty object, right?!

My select field is like that

     <label>Empresa</label>
<select class="form-control">
 <option value="{{empresa.EmpresaId}}">{{empresa.name}}</option>
 </select>

how do I use repeat in this ?

Icycool · Accepted Answer · 2016-07-01 18:05:15Z

2

Assuming your JSON data look like this

$scope.empresas = [
  { EmpresaId: 1, name: 'one' },
  { EmpresaId: 2, name: 'two' },
  { EmpresaId: 3, name: 'three' }
]

Apart from using ng-repeat on <options>, you can also utilise ng-options

<select ng-options="e.EmpresaId as e.name for e in empresas" ng-model="???"></select>

answered Jul 1, 2016 at 18:05

Icycool

7,1991 gold badge27 silver badges33 bronze badges

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

6 Comments

William Cézar Over a year ago

I'll see the usage of ng-option on documentation of AngularJs , i never see that directive . I forget that the the model that will receive that selection is ng-model="colaborador.empresa". So will be something like that : <select ng-options="e.EmpresaId as e.name for e in empresas" ng-model="colaborador.empresa">{{empresa.name}}</select> or I dont need the {{empresa.name}}?

Icycool Over a year ago

Take away the {{empresa.name}} will do

William Cézar Over a year ago

My Json its something like that, but have more atributes that I'll not use. the ng-options will make the restrictions for me?

Icycool Over a year ago

If you prefer receiving the whole object instead of just the id in ng-model (judging from your ng-model name), you can try taking away e.EmpresaId as as well.

William Cézar Over a year ago

I just have to Show the empresa.name for the user , and give to the ng-model="colaborador.empresa" , the empresa.IdEmpresa.

|

Lifz · Accepted Answer · 2016-07-01 18:20:30Z

0

You can use ng-repeat="empresa in empresas" on the <option> tags.

Here's an example:

<select>
    <option ng-repeat="empresa in empresas" value="{{empresa.EmpresaId}}">{{empresa.name}}</option>
</select>

Controller Code

$scope.empresas = [
  { EmpresaId: 101, name: 'India' },
  { EmpresaId: 102, name: 'US' },
  { EmpresaId: 103, name: 'UK' }
];

edited Jul 1, 2016 at 18:20

answered Jul 1, 2016 at 17:59

Lifz

6886 silver badges10 bronze badges

2 Comments

William Cézar Over a year ago

<option ng-repeat="empresa in empresas" value="{{empresa.EmpresaId}}">{{empresa.name}}</option> </select> like that?

Saturn K Over a year ago

Add a <select> in the beginning as well.

Collectives™ on Stack Overflow

Fill a Select field with a Json call back using AngularJs

2 Answers 2

6 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Related