AngularJs dropdown with ng-repeat

Question

I'm trying to create a dropdown list from an angular controller: My html code:

  <select>
  <option value="" disabled selected >Choose your option</option>
  <option ng-repeat="ty in type">{{ty.$value}}</option>
  </select>

Controller code:

var typeRef = new Firebase(FIREBASE_URL + "/type");
var typeArray = $firebase(typeRef).$asArray();
typeArray.$loaded().then( function (data) {
            $scope.type = data;
            console.log(data);
        });

In this case it works:

<ul id='dropdown2' class='dropdown-content'>
<li ng-repeat="ty in type"><a href="#!">{{ty.$value}}</a></li>
</ul>

The ty.$value works in above code, but in this <select> tag doesn't show anything any idea why is that?

You should not nest option tags inside option! so use ng-repeat in the select tag! — Bellash
– Bellash, Commented Aug 18, 2015 at 17:45
@Bellash I want to have multiple choices in one dropdown, if I do what you said I will have multiples dropdowns — Andrei Maieras
– Andrei Maieras, Commented Aug 18, 2015 at 17:46
You don't need $loaded(): $scope.type = $firebase(typeRef).$asArray(). And please don't use console.log to debug the AngularFire loading sequence. Just put <pre>{{ type | json }}</pre> in your HTML. The docs are great too: firebase.com/docs/web/libraries/angular/guide/… (especially if you upgrade to the latest version). — Frank van Puffelen
– Frank van Puffelen, Commented Aug 18, 2015 at 19:31

Tom · Accepted Answer · 2015-08-18 17:43:41Z

3

You don't need to use ng-repeat, you can use ng-options

<select ng-options="ty.$value for ty in type" ng-model="something">
<select>

answered Aug 18, 2015 at 17:43

Tom

7,7401 gold badge26 silver badges49 bronze badges

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

5 Comments

Andrei Maieras Over a year ago

<select ng-options="ty.$value for ty in type" ng-model="achvtype">                       <option value="" disabled selected >Choose your option</option>                     </select>

this code won't work, no errors in console, and the type array i correct

Tom Over a year ago

@AndreiMaieras, can you post a broken jsbin? Here is a working jsbin: jsbin.com/povaqimuca/edit?html,js,output

Andrei Maieras Over a year ago

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet" type="text/css" />

add this css to yours and you have the broken jsbin

Andrei Maieras Over a year ago

I use materialize.css for styling and for some reason, it stops the listing of the elements brought in from the controller

Andrei Maieras Over a year ago

jsfiddle.net/tr2uL76L/1 you can see here, if you remove the browser-default class the dropdown will not show the data

CodingNinja · Accepted Answer · 2015-08-18 18:32:36Z

1

Use

<select ng-options="ty.$value as ty.$value for ty in type" ng-model="achvtype"> <option value="" disabled selected >Choose your option</option> </select>

http://jsbin.com/juhamul/edit?html,js,output

answered Aug 18, 2015 at 18:32

CodingNinja

8019 silver badges17 bronze badges

4 Comments

Andrei Maieras Over a year ago

This looks great, but from some reason still no item in my dropdown, I'm lost.

Andrei Maieras Over a year ago

How is possible that my object printed in the console looks exactly the same with yours, but no item in the dropdown, can a HTML element interfere in this??

CodingNinja Over a year ago

can you make changes in jsbin? also give a sample array

Andrei Maieras Over a year ago

0: Object $$hashKey: "object:28" $id: "Finance" $priority: null $value: "finance" __proto__: Object This is 1 element from the array, I'll try to change the jsbin, thanks a lot

Collectives™ on Stack Overflow

AngularJs dropdown with ng-repeat

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related