AngularJS select: remove empty option and use data objects, not arrays

Question

I searched high and low for an explanation of how to remove an empty option. AngularJS always displays in select. I found a lot of information by doing this when the parameters are obtained from a JSON array located directly in the code, but I can not find anything about removing this empty option when working with data objects.

Say I have an object “foo” in my database, and “foo” has both a “name” and a “bar_id”.

Can someone give me a hint about this with data objects?

References: Angular JS Remove an empty option from a selection option

http://jsfiddle.net/MTfRD/3/ (This is someone else from the SO question linked above, the code is not mine, but taken from this fiddle).

JS:

function MyCtrl($scope) { $scope.typeOptions = [ { name: 'Feature', value: 'feature' }, { name: 'Bug', value: 'bug' }, { name: 'Enhancement', value: 'enhancement' } ]; $scope.form = {type : $scope.typeOptions[0].value}; } 

I want to get foo.name and foo.bar_id. I want foo.name to be the option label and foo.bar_id the value (for example, <option value="foo.bar_id">foo.name</option> ). For each foo, foo.bar_id will become the identification parameter in the record to pull up and display "on change" (immediately after selecting the option).

I tried everything I could think of to set this up and nothing works. The worst part is that it either fails, leaving me without an indication of what I'm doing wrong, or complaining that foo is not an object, which disappoints me to the end. (I assure you, "foo" is loaded using an AJAX request in the actual code I'm working on, and works fine as an object everywhere - the NDA forbids me to use real code, though, sorry.)

Using the above example from another thread, I understand that in the select tag in the template I would assign something like ng-model="typeOptions" , but how would I get "typeOptions" to access foo and make foo.name the option label and foo.bar_id parameter value? Also, angular defaults for parameters (those that look like a generated index) are good for me, but I still need to call foo.bar_id to complete the task, so it should be "out there somewhere."

Any help would be greatly appreciated; I'm currently stuck with the hacker ng-repeat in the option itself, which, as I understand it, is not the best practice. Also, I'm still pretty new to Angular, and yet I find it somewhat confusing, so the simpler and clearer your answers are, the better I can use them successfully. Thanks!

Answer 1

Update

Ok, now I understand what your real question is (at least I hope so)). And, fortunately, it is very simple:

Ctrl

 $scope.options = { a: 1, b: 2, c: 3 }; $scope.selected = 1; 

View

 <select data-ng-model="selected" data-ng-options="v as k for (k, v) in options" ></select> 

Demo : http://jsbin.com/hufehidotuca/1/

See the manual for more options. Especially in the section:

ngOptions (optional) & raquo; for object data sources:

---

previous answer:

As I wrote in the comments, with ngOptions :

• you cannot force angular to use your model data as the actual value of the parameter in the view. angular handles this in its own way. This only ensures that your area model is set to the correct value when changing. If this is not what you want, then you will have to write your own directive, possibly using ngRepeat .

• You will always need two separate models. One of them acts as a list of parameters (it probably should always be an array of objects) and one for storing the selected value (this will then be different in how you configure the ngOptions directive).

• Hint: the notorious null parameters are always the result when angular cannot match the list of options assigned to ngModel and the real ngModel option is not set. (Note: if ngModel simply undefined in the current area or its value cannot be matched with the list of options, then it will be set or it will be redefined with the first choice of any option. That's why the empty option disappears afterwards.)

---

Ctrl

 // the "list of options" $scope.options = [ { name: 'A', id: 1 }, { name: 'B', id: 2 }, { name: 'C', id: 3 }, { name: 'D', id: 4 } ]; // a pre-selection by value $scope.asValue = 2; // a pre-selection by object-identity $scope.asObject = $scope.options[3]; 

View

 <!-- select as value --> <select data-ng-model="asValue" data-ng-options="foo.id as foo.name for foo in options" ></select> <!-- select as object --> <select data-ng-model="asObject" data-ng-options="foo as foo.name for foo in options" ></select> <!-- the notorious blank option --> <select data-ng-model="asBogus" data-ng-options="foo as foo.name for foo in options" ></select> <!-- blank option correctly set up --> <select data-ng-model="asBogus" data-ng-options="foo as foo.name for foo in options" > <option value="">Please select</option> </select> 

demo

http://jsbin.com/yasodacomadu/1/

Answer 2

Just publish as a consequence of the whole problem with the data object ...

To do this work, I needed to first specify the ng-options that were assigned first. I already mentioned elsewhere that one of my recurring personal problems learning AngularJS is the “excessive” thing and uselessly confusing me, and this was no exception. After meeting with the employee who creates the controller script in this application using the pseudo-designations "foo.bar", I needed to configure the HTML template:

 <select ng-model="selected_item" ng-options="bar.item_name for bar in foo.bars"> 

I wanted this choice to be set to the “bar” of the current display (unlike the first indexed “bars” in the full list of “bars” of this “foo”), so I had to find a place in the application controller where this data object is transferred and is added for the model (which I will call $ selected_item):

 $scope.selected_item = _.find($scope.foo.bars, function(bar) { return bar.item_id == $scope.current_result.foo_item_id; }); 

This is a rather complex data structure with many stored procedures and concatenated tables, so I feel bad that I cannot easily translate it into a working example of a pseudo-object / property. Yoshi, you were very helpful; communication gaps here were all my villains. Thank you for joining me.

For other confusing AngularJS n00bs that might stumble upon this topic: the place where I “overdid” and got confused was mistakenly believing that I needed some code instead of the JSON arrays, many of the examples that I learned were passed to the data object. This is not true - “nothing” needs to be looked for in relation to the data transfer object and / or its properties. The properties of the data object are passed directly to the template in the select tag using ng-options . Therefore, if someone else is stumped by this, you are probably making the same two mistakes that I made: (1) thinking “something else” should replace examples of JSON arrays on the Internet, and (2) your ng options are not spelled correctly.

Angular sure sometimes I feel stupid! It's fun and difficult, but sometimes it just makes me feel like an idiot. :-)

Answer 3

 <select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" > <option style="display:none" value="">select a type</option> </select> 

Answer 4

When using Css, we remove the empty parameter, for example

 <option value="?undefind"></option> 

So, using Using Css, we can remove the empty options.

Shown in this script

http://jsfiddle.net/KN9xx/1060/