Angular js select ng-options instead of ng-repeat

Question

I have a select box where i generated options using ng-repeat, but i want that to be generated using ng-options

<select ng-change="onChangeShippingMethod(shippingMethodId)" ng-model="shippingMethodId" class="input-full-w normal_dropDown" name="gjh" id="select_shipping_method" >
    <option ng-repeat="shippingDetail in shipModeArr" value="{{shippingDetail.shipModeId}}" ng-selected="shippingDetail.shipModeId == selectedAddressPerItem[cartItems[0].cartItemId].shipModeId">
        {{shippingDetail.description}}&nbsp;Arrives {{shippingDetail.estArrivalDate | changeDateFormat | date:'mediumDate'}}{{shippingDetail.shipCharge | currency}}
    </option>
</select>

and i want a particular options should be selected based on some condition.

and using ng-repeat an empty options is coming with the other options

Please check in fiddle

@yoshi if i did with ng-repeat an empty option is coming with the other options — sameer
– sameer, Commented Sep 4, 2014 at 8:04
@yoshi and for options text i am appending many values how i can do this using ng-options — sameer
– sameer, Commented Sep 4, 2014 at 8:08
@sameer Did you check the fiddle? Does this answer your question? — Christoph Hegemann
– Christoph Hegemann, Commented Sep 4, 2014 at 9:03

Sudarshan Kalebere · Accepted Answer · 2014-09-04 07:37:48Z

1

It would be great if you would have provided some data then somebody would have developed fiddle for it Now i just can give you syntax try this applying on your code.

<select class="form-control" ng-model="searchState" ng-options="st.state for st in stateList | filter:searchCountry | orderBy:'state'">
<option value="">Select State</option>

Here i have demo in jsfiddle example for the ng-options. fiddle for particular conditions to satisfy please mention those in next question or use filters as i showed in above code. please list your problem in more detail format. including data , app.js code and some html. good luck.

answered Sep 4, 2014 at 7:37

Sudarshan Kalebere

3,9473 gold badges36 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christoph Hegemann · Accepted Answer · 2014-09-04 09:07:30Z

0

This is what i came up with. You should really provide a plunker with some data yourself next time.

The interesting part for ng options is the list comprehension like style in

ng-options="sD.shipModeId as sD.description for sD in shipModeArr"

Edit:

ng-options="sD.shipModeId as format(sD) for sD in shipModeArr"

In Controller:

$scope.format = function(sd){
    return sd.description
    + ' Arrives '
    + sd.estArrivalDate + ' '
    + $filter('currency')(sd.shipCharge);
};

You can define yourself a function to get your objects formatted nicely. I edited the plunker to show you where to put the pieces. If you expand the $scope.format function to return your formatting this should work.

If you don't want an empty selection you will have to select an initial value.

Edit2:

I updated your fiddle.

plnkr

edited Sep 4, 2014 at 9:07

answered Sep 4, 2014 at 7:43

Christoph Hegemann

1,4348 silver badges13 bronze badges

1 Comment

sameer Over a year ago

I want

{{shippingDetail.description}}&nbsp;Arrives {{shippingDetail.estArrivalDate | changeDateFormat | date:'mediumDate'}}{{shippingDetail.shipCharge | currency}}

in options text not only description

Collectives™ on Stack Overflow

Angular js select ng-options instead of ng-repeat

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related