current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 12 down vote favorite
3

I am using ng-repeat to render options with different value and text here, and also setting the default one.But again angular adds an empty undefined option. 

<select ng-model="newItem.financial_year_id" required style="min-width:180px;">
   <option ng-repeat="financial in account_year" value="{{financial.id}}" ng-selected="financial.status=='Active'">{{financial.financial_year}}</option>
</select>

Now the active one is selected but the empty option still rendering.

share|improve this question
    
you should try ng-options – Khanh TO Jan 26 '14 at 9:01
    
@KhanhTO I have values like this, 1, 2013-2014, Active and 2,2014-2015, Inactive. If the status is Active, I need to set that option selected. – devo Jan 26 '14 at 17:19
up vote 9 down vote accepted

Try ng-options instead:

<select ng-model="selectedFinancial" ng-options="c.financial_year for c in account_year"
        required style="min-width:180px;">
</select>

DEMO

You should think about redesigning your model like that to use ng-options. When we use <select>, there is only 1 selected item and this item should be a property of $scope referencing an item in the list => we don't need to duplicate 1 more property with "active" and "inactive" for all objects.

Your current model design makes sense when there are more than 1 selected item, but if there are more than 1, we should use a list of checkboxes instead of <select>

If you want to bind with Id, try this:

<select ng-model="selectedFinancialId" ng-options="c.id as c.financial_year for c in account_year"
        required style="min-width:180px;">
</select>

DEMO

share|improve this answer
    
The problem is, how can I set my own value to the options here? I need financial.id as value and financial.financial_year as option text.Your suggestion will make values like 0,1,etc.. – devo Jan 28 '14 at 12:30
    
@devo: You don't need to render your value into the options and should not care about that. When you work with angular, you should access all of this in your scope. For example: it's easy to access the id from your account_year array and your selectedFinancial. That's how Model and View separation comes into play. – Khanh TO Jan 28 '14 at 12:33
    
I am using one object newItem to set my all form values and passing only that object to my form submit to use in ajax like this, ReceiptVoucher.save(data, function (response) { }, function (error) { // error }); Here the data is the passes newItem object. – devo Jan 28 '14 at 12:40
    
@devo: You can just extract the id from selectedFinancial and construct the data you need to send. You want to bind to id field and just send it without extracting ? – Khanh TO Jan 28 '14 at 12:51
    
Yes, I don't want to extract it from my js. – devo Jan 28 '14 at 12:54
up vote 18 down vote

The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options.

You can find the full answer+example on stackoverflow. here's the link

UPDATE:

here's an example:

 <select ng-model="newItem.financial_year_id" required style="min-width:180px;">
   <option ng-repeat="financial in account_year" value="{{financial.id}}" ng-selected="financial.status=='Active'">{{financial.financial_year}}</option>
</select>

in controller:

$scope.newItem={};
$scope.account_year=[{id:1,financial_year:"2013-2014",status:"Active"},
                     {id:2,financial_year:"2014-2015",status:"Inactive"}] 
//remove empty option
$scope.newItem.financial_year_id=$scope.account_year[0].id;

live example: http://jsfiddle.net/choroshin/5YDJW/7/

share|improve this answer
    
I have values like this, 1, 2013-2014, Active and 2,2014-2015, Inactive. If the status is Active, I need to set that option selected. Can you help me to achieve this? – devo Jan 26 '14 at 17:19
    
updated my answer, I hope this will help you – Alex Choroshin Jan 26 '14 at 20:08
    
Can you tell me the change with my code? I can't rename the ng-model newItem, because I am passing this object to my submit function.I am getting one extra empty option in your jsfiddle example also.jsfiddle.net/choroshin/5YDJW/3 – devo Jan 28 '14 at 12:34
    
I updated my answer with new fiddle and you can see there is no empty option because I added $scope.newItem.financial_year_id=$scope.account_year[0].id; – Alex Choroshin Jan 28 '14 at 13:52
    
I am using the same. It is not working. <select id="requestorSite" ng-model="selectedUserProfile" ng-options="userProfile.userProfileName for userProfile in userProfiles" class="form-control displayInlineBlock width40per marginLeft15"> </select> – Ankit Tanna May 7 '15 at 14:57
up vote 0 down vote

Ng-option is also a good way. But if you really want ng-repeat then use like this. 

  $scope.newItem.financial_year_id=" ";

Initialize the variable when you start the controller. If you not initialize it then it takes as undefined. So the first empty value is present.

share|improve this answer

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.