13

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.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132

3 Answers3

19

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/

Community
  • 1
  • 1
Alex Choroshin
  • 6,177
  • 2
  • 28
  • 36
  • 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? – Anshad Vattapoyil Jan 26 '14 at 17:19
  • 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.http://jsfiddle.net/choroshin/5YDJW/3/ – Anshad Vattapoyil 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. – Ankit Tanna May 07 '15 at 14:57
  • Me too.. I edited his fiddle. I am getting 1 extra blank option. – Ankit Tanna May 07 '15 at 14:59
  • Just fill the ng-model reference with one of values in the ng-options – sergiovilar Mar 07 '16 at 03:04
9

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

Khanh TO
  • 48,509
  • 13
  • 99
  • 115
  • 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.. – Anshad Vattapoyil 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. – Anshad Vattapoyil 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. – Anshad Vattapoyil Jan 28 '14 at 12:54
  • @devo: I'm not sure if that's a good idea, it does not feel like OOP because if `selectedFinancial` is an object, you could bind on it to display a detailed view, for example. – Khanh TO Jan 28 '14 at 12:58
  • You mean, I have to pass the second object also to my function right? ``ng-click="formSubmit(newItem,selectedFinancial)"``. Then in controller I have to push ``selectedFinancial`` to ``data`` object to pass in ``$http``. – Anshad Vattapoyil Jan 28 '14 at 13:08
  • @devo: there are various ways of doing that. This could be a way. – Khanh TO Jan 28 '14 at 13:10
0

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.

Anbu
  • 490
  • 6
  • 20