CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
ngplayground
ngplayground

Reputation: 21627

AngularJS prepending my select box with an option

AngularJS

app.factory('SnazzyService', ['$http', function($http){
    return {
        getList: function(){
            return $http.get('feed.php');
        }
    };
}]);

app.controller('MenuSideController', ['$scope','SnazzyService','$modal','$log', function($scope, SnazzyService, $modal, $log) {

        SnazzyService.getList().success(function(snazzy){
            $scope.snazzy = snazzy;
        });
}]);

HTML

<select data-ng-model="user.snazzy" data-ng-options="a.name for a in snazzy">                
</select>

I have the above code which works fine and outputs my select box with options. My question is, how do I prepend the Select box options with a value such as <option value="NONE" selected="selected">None</option>

Upvotes: 1

Views: 358

Answers (2)

Shomz
Shomz

Reputation: 37701

Not quite clear if you want to append a single option to your select or you wish to modify all of them. If it's the latter, you can always use ng-repeat on the option element like this: 

<select data-ng-model="snazzy">
      <option ng-repeat="s in snazzy" value="NONE" selected="selected">{{s.name}}</option>
</select>

Upvotes: 1

musically_ut
musically_ut

Reputation: 34288

From the documentation:

Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.

Example:

    <select ng-model="color" ng-options="c.name for c in colors">
      <option value="">-- choose color --</option>
    </select>

Upvotes: 4

Related Questions