angularjs select box set object value

Question

this is my angular

angular.module("myApp",[])
.controller("myCtrl",function($scope){
  $scope.projectObj = {"proId":"33","proName":"samal"}
  $scope.projectArr = [{"proName":"samal","proId":"33"},{"proName":"aaa","proId":"47"},{"proName":"sdf","proId":"48"},{"proName":"sdf","proId":"49"},{"proName":"sddd","proId":"50"},{"proName":"dddd","proId":"51"},{"proName":"ttt","proId":"52"},{"proName":"sdf","proId":"53"},{"proName":"sdf","proId":"54"},{"proName":"sdf","proId":"55"},{"proName":"sdf","proId":"56"},{"proName":"sdf","proId":"57"},{"proName":"sdf","proId":"58"},{"proName":"sdf","proId":"59"},{"proName":"sdf","proId":"60"}]
})

this is my select box

<select ng-model="projectObj">
   <option value="{{item}}" ng-repeat="item in projectArr">{{item.proName}}</option>
</select>

$scope.projectObj is already assign with an object and it is already inside $scope.projectArr. what is want is when i load the html file $scope.projectObj proName should be pre-selected.how can i do this. this is my pluker

Check my answer it is working.

Rashid Javed
– Rashid Javed

2016-07-29 09:29:10 +00:00
Commented Jul 29, 2016 at 9:29 — Rashid Javed
– Rashid Javed, Commented Jul 29, 2016 at 9:29

Pankaj Parkar · Accepted Answer · 2016-07-29 09:55:05Z

2

Repeating options isn't preferred way to show select dropdown. I'd suggest you to to use ng-options directive to get object binding on ng-model

<select  flex ng-model="projectObj" 
  ng-options="item as item.proName for item in projectArr">
</select>

And then assign projectObj from projectArr.

$scope.projectObj  = $scope.projectArr[0];

Demo here

Use md-select for Angular material like below and use ng-model-options="{trackBy: '$value.proId' for directly pre select object. Additionally you have to follow Dot Rule while defining ng-model

Markup

<md-input-container>
  <md-select ng-model="projectObj" placeholder="Select a state"
    ng-model-options="{trackBy: '$value.proId'}">
    <md-option ng-value="item" ng-repeat="item in projectArr">
      {{ item.proName }}
    </md-option>
  </md-select>
</md-input-container>

CodePen

edited Jul 29, 2016 at 9:55

answered Jul 29, 2016 at 9:23

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

8 Comments

Sachila Ranawaka Over a year ago

thing is i'm using angular material design for my app. when i'm using ng option its not supported in material

Pankaj Parkar Over a year ago

@IT13122256RanawakaR.A.S.M look at the updated answer please

Sachila Ranawaka Over a year ago

i want to remove this $scope.projectObj = $scope.projectArr[0]; and only use like this $scope.projectObj = {"proId":"33","proName":"samal"}. then its not working y is that. both are same to in my knowledge

Pankaj Parkar Over a year ago

@IT13122256RanawakaR.A.S.M no, $scope.projectObj = $scope.projectArr[0]; is taking object from same array reference, where as the $scope.projectObj = {"proId":"33","proName":"samal"} creates a new reference

Sachila Ranawaka Over a year ago

thing is i'm getting the array and object from separate request and if i use $scope.projectObj = $scope.projectArr[0] then i need to loop through projectArr array get the object and assign it to projectObj

|

Rashid Javed · Accepted Answer · 2016-07-29 09:24:34Z

0

You can use ng-selected. This will work.

<option value="{{item}}" ng-selected="item" ng-repeat="item in projectArr">{{item.proName}}</option>

answered Jul 29, 2016 at 9:24

Rashid Javed

629 bronze badges

Collectives™ on Stack Overflow

angularjs select box set object value

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related