Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angularjs - Add multiple hard-coded options to select box with ng-options

I have a select box that is populated with ng-options. I know you can add a default option manually, like so:

<select ng-model="selectedAddress" ng-init="selectedAddress = selectedAddress || address_dropdown[0].value" ng-change="handleStoredAddressClick2()" ng-options="a.dropdown_display for a in address_dropdown"  id="address_dropdown">
    <option value="" ng-selected="selected">Add a new address</option>
</select> 

Is there any way (in angular) to add multiple options? The client now wants to have the first, default option say "Select from addresses", and have the Add New Address option shown above be the last option in the list, after all the populated options from ng-options.

(I know I could use jQuery to add that option, but would rather keep it all angular if possible.)

like image 322
EmmyS Avatar asked Mar 21 '14 15:03

EmmyS


2 Answers

EDIT 2: To you, downvoters: You may notice, this post is from march 2014. Use the source, Luke! (I am not into angularJs anymore)

EDIT: this wont work "If you want the model to be bound to a non-string" as Emmy mentioned!

try this:

    <select ng-model="YourModel">
      <option value="" ng-selected="selected">an option</option>
      <option ng-repeat="item in items">{{item.name}}</option>
      <option value="">another option</option>
    </select> 

have a nice weekend!

like image 160
nilsK Avatar answered Sep 22 '22 06:09

nilsK


Amend your controller to supply address_dropdown with additional options

<select ng-model="selectedAddress" ng-init="selectedAddress = selectedAddress || address_dropdown[0].value" ng-change="handleStoredAddressClick2()" ng-options="a.dropdown_display for a in getAddress_dropdown(address_dropdown)"  id="address_dropdown">
  <option value="" ng-selected="selected">Add a new address</option>
</select> 

$scope.getAddress_dropdown=function(data)
{
    var temp=[{dropdown_display: 'Select from addresses'}];
    return temp.concat(data);
}
like image 45
mrosiak Avatar answered Sep 21 '22 06:09

mrosiak