AngularJS - Multiple select with setting default value of select dynamically

Question

Code for each product and it's catalogue information in drop down individually using AngularJS:

<ul style="height:250px;" >
<li data-ng-repeat="product in products" >
<div> {{SelectedOption.Price}} </div>
<select  data-ng-model="SelectedOption"  data-ng-init="SelectedOption=Catalogues[0]" data-ng-options="Catalogue as Catalogue.CName for Catalogue in Catalogues | filter:{ProductId:product.ProductId}:true" >                             
</select>
</li>
</ul>

Controller code is like this

 var app = angular.module('myApp', []);
 app.controller('myControl', function ($scope) {
 $scope.products = [{ productname: 'Rice1', ProductId: 1}, { productname: 'Rice2', ProductId: 2 },{ productname: 'Rice3', ProductId: 3 }];    
 $scope.Catalogues = [{ ProductId: 1, CatalogueId: 1, CName: '25KG Bag', Price: 500, sortorder: 1 }, { ProductId: 1, CatalogueId: 2, CName: '50KG Bag', Price: 1000, sortorder: 2 },{ ProductId: 2, CatalogueId: 3, CName: '100KG Bag', Price: 1800, sortorder: 2 }];

Now want to set the default value of the each product catalogue.cname dynamically with the first value of the select drop down, Any idea? Much appreciated!

http://plnkr.co/edit/9MYrj1YJt7HzLR9FGDqD?p=preview

Plnkr result want to set for second drop down also with "100KG Bag"

Lucas Rodriguez · Accepted Answer · 2015-12-14 02:34:16Z

2

To set the default value in the select, you need to set the ng-model as the first in the list you are using. Put this at the end of the controller:

 $scope.SelectedOption = $scope.Catalogues[0];

answered Dec 14, 2015 at 2:34

Lucas Rodriguez

1,2036 silver badges15 bronze badges

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

4 Comments

Sridhar Over a year ago

This doesn't work for me,Updated code want to set default value for each product. Thanks for help.

Lucas Rodriguez Over a year ago

Set up a plunker, it's going to be easier to track the behavior you are expecting.

Sridhar Over a year ago

Updated plunker to question.

Lucas Rodriguez Over a year ago

$scope.SelectedOption is going to be unique among all the products. You may want to create a SelectedOption property for each product: product.SelectedOption

Collectives™ on Stack Overflow

AngularJS - Multiple select with setting default value of select dynamically

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related