Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

In salesforce.com Visualforce pages the default option value for null is not being displayed. I have a very simple select component with one option child for the none or null value as defined by the Angular Docs (http://docs.angularjs.org/api/ng/directive/select).

Here is the app:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"/>
<script>
    var myApp = angular.module('myApp',[]);

    function MyCtrl($scope) {
        $scope.colors = [
            {name:'black', shade:'dark'},
            {name:'white', shade:'light'},
            {name:'red', shade:'dark'},
            {name:'blue', shade:'dark'},
            {name:'yellow', shade:'light'}
        ];
    }
</script>

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <select ng-model="color" ng-options="c.name for c in colors">
            <option value="">-- choose color --</option>
        </select>   
        {{color.name}}
    </div>
</div>

As you can see on this page, http://geopointedev-developer-edition.na14.force.com/angularoption , the "-- choose color --" option is not displayed. But on this jsfiddle, http://jsfiddle.net/MTfRD/670/ , it is working perfectly. Any ideas why the none option is not being displayed in salesforce.com Visualforce pages?

share|improve this question
add comment

1 Answer

Tehnrd,

Long story short:

ng-options validates the Options list it generates against the evaluated scope statement given to it.

From your source above, '--choose color--' isn't part of the $color array. While the docs specifically mention using a option element with an nil value for the "nothing selected" element, I've discovered that visualforce strips the options tags that have a nil value. If you look at your visualforce rendered source, the nil value option element is missing. Because the element is missing, ng-option is inserting a blank select option.

Two ideas for a direct workaround

1: Given a select object with id "colorSelect":

angular.getElement('#colorSelect').append('<option value=\'\'>--choose color--</option>');

before your ng-options directive is executed. thats ugly and hacky and i don't like it. Likewise you could alter the value, if you chose that way. Thats actually probably a better way.

2: I think the most-elegant way to do this (and it's still lipstick on a pig) is to add your '--choose color--' option to the $scope.colors array as a value. Ng-options will render it as the selected option once you set $scope.color = '--choose color--'

Then create a watch function that removes '--choose color--' from the array when $scope.color changes.

Here's a js Fiddle with the watch statement doing it's job and the default being chosen from teh given array.

http://jsfiddle.net/Nr9L4/

share|improve this answer
    
Ya, I thought about adding -- None -- to the $scope.colors array and that world work but this is also a primitive example. In real use this is being ordered alphabetically with orderBy filter. -- None -- is usually at the top unless one of the values starts with '&' or some other value that is alphabetically in front of '-'. Could just create custom orderBy function but gosh that's annoying. –  TehNrd Feb 19 at 18:00
    
Also, are you forcing Visualforce into HTML5 mode? –  Kevin P Feb 19 at 18:02
    
FWIW option 1 doesn't work. –  TehNrd Feb 19 at 18:02
    
Yup, docType="html-5.0" –  TehNrd Feb 19 at 18:02
    
Thanks, I'll edit option 1 out. –  Kevin P Feb 19 at 18:02
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.