Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS - Set default value on select inside a ng-repeat [duplicate]

I'm facing to an issue with AngularJS - I'm not able to display the selected value in a <select>.

Here is my use case:

I have a view which starts by an ng-repeat to display components. Each component contains a select to choose the vat rate. When creating new items, it looks fine. But when I'm editing existing items, the actual vatRate code is not displayed in the select, and instead I see the default option "-- Select VAT Rate --" instead of the selected VAT.

My model only contains the Id of the vat Rate.

With a single component I can use a variable in the $scope to set the current item value, but here I can have multiple components, each of them has its own vat rate, so I am not sure how do that here:

Here is my code

<div ng-repeat="i in items">
   <label>{{i.id}}</label>
   <input ng-model="i.title">
   <select ng-model="i.vatRateId">
      <option value="">--- Select an option ---</option>
      <option ng-repeat="value in vatRates"
              ng-selected="i.vatRateId == value.id"
              value="{{value.id}}">{{value.value}}     
      </option>
   </select>
</div>

And the objects:

$scope.vatRates = [
    { 'id': 1, 'value' : '20' },
    { 'id': 2, 'value' : '10' },
    { 'id': 3, 'value' : '7' }
];

$scope.items = [
    { 'id': 1, 'title' : 'Title1', 'vatRateId' : '1' },
    { 'id': 2, 'title' : 'Title2', 'vatRateId' : '2' },
    { 'id': 3, 'title' : 'Title3', 'vatRateId' : '3' }
];

Here is a live demo to explain my issue:

Demo on PLNKR

I'm not able to set to each item in the select the right value.

like image 535
Pat Avatar asked May 06 '15 21:05

Pat


People also ask

How do I set default selected value in ng-options?

Use ng-init to set default value for ng-options . Save this answer.

What can I use instead of NG-repeat?

You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

What is difference between ng-repeat and Ng-options?

ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat.

How do you use NG-repeat in a table?

The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.


1 Answers

I am not very much clear about your requirement but if you want to display a default selected value to <select>, you can use ng-selected. In order to use that you need to have default selected value in your controller as a model to your <select> and add ng-selected to your <options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">

For code and reference i just altered your plunker,

http://embed.plnkr.co/ZXo8n0jE8r3LsgdhR0QP/preview

Hope this helps.

like image 174
Alhuck Avatar answered Sep 19 '22 21:09

Alhuck