Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularFire & ngOptions

I am struggling to populate a select form element. Here is the syntax that I have so far. It will not grab the program.title and populate the ngOptions.

<select ng-model="student.program" ng-options="program.title for program in programList.title">
<option value="">Select A Program</option>
</select>

Here is the basic JSON structure of my data on Firebase:

{ "-JNIBeRDAuNN9c7SGZ91" : { "location" : "Online", "director" : "Shawn Clark", "title" : "Web Design & Development" }, "-JNIBuaQlWyEyWRjONPa" : { "location" : "Online", "director" : "Walen Morrow", "title" : "Graphic Design" }, "-JNIBmIwasMYOPRPupHl" : { "location" : "Campus", "director" : "Tracy Monohan", "title" : "Web Design & Development" }, "-JNKGPNj-lGzqHJ92RTD" : { "location" : "Online", "director" : "Glen Speedy", "title" : "Theory of Animation & Physics" }, "-JNK9oTO97PfSo-0wQfY" : { "location" : "Campus", "director" : "John Myers", "title" : "Instructional Design & Technology" }, "-JNIC3Tldo-Qi3ru2ph7" : { "location" : "Campus", "director" : "George Narrow", "title" : "Graphic Design" }, "-JNK8cdgdHKjH2meKl9x" : { "location" : "Online", "director" : "Stacy McNally", "title" : "Instructional Design & Technology" } }

like image 960
Clayton Allen Avatar asked Feb 05 '26 16:02

Clayton Allen


1 Answers

I believe you are looking for

<select ng-model="student.program" ng-options="program.title for (id, program) in programList"><option value="">Select A Program</option></select>

Your JSON's root object is an object, not an array. See angular documentation for object data sources

See Plunker

like image 133
Joel Jeske Avatar answered Feb 07 '26 11:02

Joel Jeske



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!