weird behavior scope and ng-repeat in view, angular JS

Question

I am having a weird behavior.

In the view I have the follow code :

<div class="form-group">

  <select class="form-control" name="name" id="repeatSelect" ng-model="selectedOption">
    <option ng-repeat="o in availableOptions" value="{{o}}">{{o.name}}</option>
      </select>
    </div>
<p>{{selectedOption}}</p>
<p>{{selectedOption.value}}</p>

And in the controller I have :

$scope.availableOptions= [
  {id: '1', name: 'name2', value:{w: 100, h: 250}},
  {id: '2', name: 'name1', value:{w: 200, h: 100}},
  ];
$scope.selectedOption = $scope.availableOptions[1];

The problem is the follow : At first time the first two  (selectedOption and selectedOption.value) are showing right. However when I change the value of in the select only {{selectedOption}} is showed while {{selectedOption.value}} doesn't show anything.

Any help???

PD: with ng-option into select it worked, but why with ng-repeat not?

Can you provide some output code or console logs please.

theblindprophet
– theblindprophet

2016-04-09 00:55:15 +00:00
Commented Apr 9, 2016 at 0:55 — theblindprophet
– theblindprophet, Commented Apr 9, 2016 at 0:55

Konkko · Accepted Answer · 2016-04-09 01:57:20Z

2

Only explanation I could think of was that it changes the object into a string. The work around you could do is creating ng-change="foo(selectedOption)" into the select and the function looking something like this:

$scope.foo = function(val){
     $scope.selectedOption = angular.fromJson(val);   
}

EDIT

http://www.w3schools.com/tags/tag_option.asp from here we can confirm that the value is converted to string.

edited Apr 9, 2016 at 1:57

answered Apr 9, 2016 at 1:32

Konkko

6624 silver badges15 bronze badges

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

3 Comments

nacho c Over a year ago

Yes it will work, but it is not the best solution for this. Do you know what this behavior ?

Konkko Over a year ago

w3schools.com/tags/tag_option.asp from here you can see that value tag returns a text value. This is the reason why you won't get the {{selectedOption.value}} working because it's returning a string.

nacho c Over a year ago

You are right, the problem is that {{selectedOption.value}} return a string. So the best option that I have chosen is use "ngSelect".

chrisboustead · Accepted Answer · 2016-04-09 01:05:59Z

0

Try changing the value attribute to:

<div class="form-group">

  <select class="form-control" name="name" id="repeatSelect" ng-model="selectedOption">
    <option ng-repeat="o in availableOptions" ng-value="o.value">{{o.name}}</option>
      </select>
    </div>
<p>{{selectedOption}}</p>
<p>{{selectedOption.value}}</p>

answered Apr 9, 2016 at 1:05

chrisboustead

1,57312 silver badges17 bronze badges

Collectives™ on Stack Overflow

weird behavior scope and ng-repeat in view, angular JS

2 Answers 2

EDIT

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related